如何通过CSS实现页面中文本的整齐上下排列？

从你提供的示例图来看，需求是让不同长度的文本块在垂直方向上规整排列，每个文本块高度统一，文本在块内居中对齐。下面是几种实用的实现方案：

方法1：Flexbox布局（推荐） #

如果文本是嵌套在容器的子元素中，Flexbox是最灵活的实现方式：

HTML结构示例 #

<div class="text-container">
  <div class="text-item">标题</div>
  <div class="text-item">标题标题</div>
  <div class="text-item">标题标题标题</div>
</div>

CSS代码 #

.text-container {
  /* 设置垂直排列方向 */
  display: flex;
  flex-direction: column;
  /* 可选：若需要容器占满固定高度，让子元素均匀分布 */
  height: 300px;
  justify-content: space-around; /* 可替换为space-between/center，按需选择 */
}

.text-item {
  /* 统一每个文本块的高度，同时让文本垂直居中 */
  height: 60px;
  display: flex;
  align-items: center;
  /* 可选：添加内边距、边框优化视觉效果 */
  padding: 0 10px;
  border: 1px solid #eee;
}

如果不需要容器固定高度，仅需文本块统一高度，去掉容器的height和justify-content属性即可。

方法2：Grid布局 #

Grid布局也能快速实现垂直规整排列：

CSS代码 #

.text-container {
  display: grid;
  /* 定义每行的固定高度，repeat(3,60px)表示3行每行60px */
  grid-template-rows: repeat(3, 60px);
  gap: 10px; /* 文本块之间的间距 */
}

.text-item {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #eee;
}

方法3：line-height单行文本方案 #

如果所有文本都是单行，可通过line-height实现垂直居中：

.text-item {
  height: 60px;
  line-height: 60px; /* 与高度值一致，实现单行文本垂直居中 */
  padding: 0 10px;
  border: 1px solid #eee;
}

你可以根据自己的实际HTML结构和布局需求，选择对应的方案即可。

内容的提问来源于stack exchange，提问作者Marvin