gpt4 book ai didi

html - 如何垂直对齐定义列表中的文本?

转载 作者:行者123 更新时间:2023-11-27 23:42:10 25 4
gpt4 key购买 nike

我有一个定义列表。我想在每个 dd 的中间垂直对齐文本。

dl, dt, dd {
margin:0;
}
dt {
background: blue;
}
dd {
min-height: 100px;
background: gold;
border-bottom: 3px solid white;
}
<dl> 
<dt>Fruit</dt>
<dd>Apple</dd>
<dd>Banana</dd>
<dd>Pear</dd>
</dl>

我尝试使用表格单元格方法来做到这一点 - JsFiddle .但这导致所有 dd 在本应彼此重叠的情况下在一行中输出。

如何获得堆叠式列表,每个金色部分的文本垂直对齐?

请注意:不要使用 flexfox,文本可以多行

最佳答案

因为您可以在 <dd> 中添加额外的标签,这里是解决方案,所以设置每个 <dd>作为table每个 <span>内部为 table-cell , 然后我们可以为其设置垂直对齐方式。

它适用于多行文本,请参见以下演示。

dl, dt, dd {
margin:0;
}
dl {
width: 100px;
}
dt {
background: crimson;
}
dd {
display: table;
border-collapse: collapse;
width: 100%;
height: 100px;
background: gold;
}
dd span {
display: table-cell;
vertical-align: middle;
border: 1px solid white;
}
<dl> 
<dt>Fruit</dt>
<dd><span>Apple</span></dd>
<dd><span>Banana, I love bananas.</span></dd>
<dd><span>Pear</span></dd>
</dl>

关于html - 如何垂直对齐定义列表中的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31302471/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com