ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【CSS】让文字垂直居中的方法 [打印本页]
作者: 嚴華    时间: 2024-10-10 21:31
标题: 【CSS】让文字垂直居中的方法
在 Taro 或任何基于 HTML 和 CSS 的项目中，有多种方法可以让文字垂直居中。这些方法包括使用 Flexbox、CSS Grid、line-height 等。下面我将详细介绍每种方法，并提供相干的代码示例。
方法一：使用 Flexbox

Flexbox 是现代布局的最佳选择之一。它不仅可以轻松地让内容在容器内垂直居中，还可以程度居中。
示例

  1. .realData {
  2.   display: flex;
  3.   padding: 40px 0;
  4.   .title {
  5.     width: 40%;
  6.     font-weight: 600;
  7.     font-size: 28px;
  8.     display: flex; /* 使用 Flexbox */
  9.     align-items: center; /* 垂直居中 */
  10.     justify-content: center; /* 水平居中（可选） */
  11.   }
  12.   .data {
  13.     flex: 1;
  14.     display: flex; /* 使用 Flexbox */
  15.     align-items: center; /* 垂直居中 */
  16.     justify-content: center; /* 水平居中（可选） */
  17.   }
  18. }
复制代码
组件文件

  1. import React from 'react';
  2. import { View } from '@tarojs/components';
  3. import styles from './index.module.scss';
  5. const MyComponent: React.FC = () => {
  6.   return (
  7.     <View className={styles.realData}>
  8.       <View className={styles.title}>数据</View>
  9.       <View className={styles.data}>2号</View>
  10.     </View>
  11.   );
  12. };
  14. export default MyComponent;
复制代码
方法二：使用 CSS Grid

CSS Grid 也支持非常灵活和强大的布局选项。
示例

  1. .realData {
  2.   display: grid;
  3.   padding: 40px 0;
  4.   .title {
  5.     width: 40%;
  6.     font-weight: 600;
  7.     font-size: 28px;
  8.     display: grid; /* 使用 CSS Grid */
  9.     place-items: center; /* 水平垂直居中 */
  10.   }
  11.   .data {
  12.     flex: 1;
  13.     display: grid; /* 使用 CSS Grid */
  14.     place-items: center; /* 水平垂直居中 */
  15.   }
  16. }
复制代码
方法三：使用 Line-Height（仅实用于单行文本）

这种方法相对简朴，但只实用于固定高度且是单行的文本。
   这个一定要先固定行高，不让无法生效
  示例

  1. .realData {
  2.   display: flex;
  3.   padding: 40px 0;
  4.   .title {
  5.     width: 40%;
  6.     font-weight: 600;
  7.     font-size: 28px;
  8.     height: 100px; /* 固定高度 */
  9.     line-height: 100px; /* 设置与高度相同的行高，实现垂直居中 */
  10.   }
  11.   .data {
  12.     flex: 1;
  13.     height: 100px; /* 固定高度 */
  14.     line-height: 100px; /* 设置与高度相同的行高，实现垂直居中 */
  15.   }
  16. }
复制代码
方法四：使用 Position + Transform

这种方法也实用于各种场景，固然写法稍显繁琐。
示例

  1. .realData {
  2.   display: flex;
  3.   padding: 40px 0;
  4.   .title, .data {
  5.     position: relative;
  6.     width: 40%;
  7.     font-weight: 600;
  8.     font-size: 28px;
  9.   }
  10.   .title::before {
  11.     content: '';
  12.     display: inline-block;
  13.     height: 100%;
  14.     vertical-align: middle;
  15.   }
  16.   .title span {
  17.     display: inline-block;
  18.     vertical-align: middle;
  19.   }
  20. }
复制代码
组件文件

  1. import React from 'react';
  2. import { View } from '@tarojs/components';
  3. import styles from './index.module.scss';
  5. const MyComponent: React.FC = () => {
  6.   return (
  7.     <View className={styles.realData}>
  8.       <View className={styles.title}><span>数据</span></View>
  9.       <View className={styles.data}>2号</View>
  10.     </View>
  11.   );
  12. };
  14. export default MyComponent;
复制代码
总结

推荐使用 Flexbox 或 CSS Grid 的方法，这两种方法不仅简朴易用，而且兼容性好，实用于各种场景。line-height 方法也可以在简朴的单行文本垂直居中效果中使用。假如你更加灵活地调整，你可能须要联合多个方法。
通过这些方法，你可以确保文本在容器中垂直居中，并且在不同的设备和分辨率下都能保持精良的显示效果。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4