如何用CSS实现描述列表（dl）内文本的水平对齐？

你遇到的问题是dt里的固定宽度图标导致dt文本和dd文本无法水平对齐，用Flexbox或Grid都能轻松解决，下面是两种具体实现方案：

方案一：Flexbox布局 #

基于你提供的HTML结构，添加以下CSS即可：

dl > div {
  display: flex;
  align-items: center;
  margin-bottom: 8px; /* 可选，给列表项加间距 */
}

dt {
  display: flex;
  align-items: center;
  width: 120px; /* 固定dt总宽度，保证所有dt区域一致 */
}

.ic {
  display: inline-block;
  width: 24px; /* 图标固定宽度，替换成你实际的图标尺寸 */
  height: 24px;
  background-color: #ccc; /* 示例背景，换成你的图标样式 */
  margin-right: 8px;
}

dd {
  flex: 1; /* 让dd占满剩余空间 */
  margin: 0; /* 清除浏览器默认的dd外边距 */
}

原理：把每个列表项（div）设为Flex容器，垂直居中对齐内容；给dt固定宽度后，不管图标占多少空间，dt的文本都会在统一的位置，dd自动填充剩余区域。

方案二：Grid布局 #

这种布局方式更直观，代码如下：

dl > div {
  display: grid;
  grid-template-columns: 120px 1fr; /* 第一列对应dt宽度，第二列自动占剩余空间 */
  align-items: center;
  margin-bottom: 8px;
}

dt {
  display: flex;
  align-items: center;
}

.ic {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #ccc;
  margin-right: 8px;
}

dd {
  margin: 0;
}

原理：通过Grid的列模板直接划分dt和dd的区域，第一列固定宽度给dt，第二列自适应，天然实现对齐效果，dt内部用Flex让图标和文本居中。

两种方案都能实现需求，你可以根据自己的习惯选择：Flexbox更适合需要灵活调整的场景，Grid布局的代码逻辑更清晰。

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