【CSS】让文字垂直居中的方法
在 Taro 或任何基于 HTML 和 CSS 的项目中，有多种方法可以让文字垂直居中。这些方法包括使用 Flexbox、CSS Grid、line-height 等。下面我将详细介绍每种方法，并提供相干的代码示例。方法一：使用 Flexbox
Flexbox 是现代布局的最佳选择之一。它不仅可以轻松地让内容在容器内垂直居中，还可以程度居中。
示例
.realData {
display: flex;
padding: 40px 0;
.title {
width: 40%;
font-weight: 600;
font-size: 28px;
display: flex; /* 使用 Flexbox */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中（可选） */
}
.data {
flex: 1;
display: flex; /* 使用 Flexbox */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中（可选） */
}
}
组件文件
import React from 'react';
import { View } from '@tarojs/components';
import styles from './index.module.scss';
const MyComponent: React.FC = () => {
return (
<View className={styles.realData}>
<View className={styles.title}>数据</View>
<View className={styles.data}>2号</View>
</View>
);
};
export default MyComponent;
方法二：使用 CSS Grid
CSS Grid 也支持非常灵活和强大的布局选项。
示例
.realData {
display: grid;
padding: 40px 0;
.title {
width: 40%;
font-weight: 600;
font-size: 28px;
display: grid; /* 使用 CSS Grid */
place-items: center; /* 水平垂直居中 */
}
.data {
flex: 1;
display: grid; /* 使用 CSS Grid */
place-items: center; /* 水平垂直居中 */
}
}
方法三：使用 Line-Height（仅实用于单行文本）
这种方法相对简朴，但只实用于固定高度且是单行的文本。
这个一定要先固定行高，不让无法生效
示例
.realData {
display: flex;
padding: 40px 0;
.title {
width: 40%;
font-weight: 600;
font-size: 28px;
height: 100px; /* 固定高度 */
line-height: 100px; /* 设置与高度相同的行高，实现垂直居中 */
}
.data {
flex: 1;
height: 100px; /* 固定高度 */
line-height: 100px; /* 设置与高度相同的行高，实现垂直居中 */
}
}
方法四：使用 Position + Transform
这种方法也实用于各种场景，固然写法稍显繁琐。
示例
.realData {
display: flex;
padding: 40px 0;
.title, .data {
position: relative;
width: 40%;
font-weight: 600;
font-size: 28px;
}
.title::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.title span {
display: inline-block;
vertical-align: middle;
}
}
组件文件
import React from 'react';
import { View } from '@tarojs/components';
import styles from './index.module.scss';
const MyComponent: React.FC = () => {
return (
<View className={styles.realData}>
<View className={styles.title}><span>数据</span></View>
<View className={styles.data}>2号</View>
</View>
);
};
export default MyComponent;
总结
推荐使用 Flexbox 或 CSS Grid 的方法，这两种方法不仅简朴易用，而且兼容性好，实用于各种场景。line-height 方法也可以在简朴的单行文本垂直居中效果中使用。假如你更加灵活地调整，你可能须要联合多个方法。
通过这些方法，你可以确保文本在容器中垂直居中，并且在不同的设备和分辨率下都能保持精良的显示效果。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]