如何使用 CSS 对齐描述列表中的文本？

我想在 HTML 中创建一个描述列表，其 dt 元素内有一个图标。

<dl>
        <div>
            <dt><span class="ic"></span><span>Dt</span></dt>
            <dd><span>Desc</span></dd>
        </div>
    </dl>

由于该图标具有一定的宽度，因此 dt 和 dd 元素的跨度不会水平对齐。我怎样才能在这里实现水平对齐？我添加了一张图片来描述我的意思。HTML 输出 https://i.stack.imgur.com/pn4BU.png

我搜索了一种使用 css flexbox 或 grid 的解决方案，但没有找到。

*这是我对之前提出的问题的回答。我相信你还在问同样的事情：如何在 HTML/CSS 中水平对齐不同父项的跨度 https://stackoverflow.com/q/75508863/21121257

是的，您可以通过使用 display:table、table-row 和 table-cell CSS 属性来水平对齐“term”和“desc”跨度，而无需使用 JavaScript。

我想你会想要这样的东西：

.list-item dt {
  display: table-cell;
  vertical-align: middle;
}

.list-item dd {
  display: table-cell;
  margin-left: 10px; /* Add some space between term and desc */
  vertical-align: middle;
}

.list-item .term {
  display: inline-block;
  font-weight: bold;
}

.list-item .icon {
  display: inline-block;
  width: 20px; /* Adjust as needed */
  height: 20px; /* Adjust as needed */
  background-color: red; /* Just for illustration */
  margin-right: 5px; /* Add some space between icon and term */
}

.list-item div {
  display: table-row;
}

这里我们将 dt 和 dd 元素的显示属性设置为 table-cell，这使得它们的行为就像表格中的单元格一样。我们还将父 div 的 display 属性设置为 table-row，这使得它的行为就像表中的一行。

默认情况下，表格单元格将其内容垂直对齐到单元格的中间。我们可以使用 Vertical-align 属性将“term”和“desc”跨度的内容垂直对齐到各自单元格的中间。

最后，我们将“term”跨度的显示属性设置为 inline-block，这允许我们对其应用 font-weight 属性。我们还将“图标”跨度的显示属性设置为 inline-block 并为其指定宽度和高度，以便它占用一些空间。然后，我们可以使用 margin-right 属性在“icon”和“term”跨度之间添加一些空间。

您可以根据需要调整“图标”和其他元素的宽度和高度以适合您的设计。

希望这可以帮助！