Question

我有一个定义列表。我想垂直对齐每个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 ，文字可以多行。

Answer 1

由于您可以在<dd>中添加额外的代码，因此这是解决方案，因此将每个<dd>设置为table，将每个<span>设置为table-cell ，然后我们可以设置垂直对齐。

它适用于多行文本，请参阅以下演示。

＆＃13;

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;
}

＆＃13;

<dl> 
    <dt>Fruit</dt>
    <dd><span>Apple</span></dd>
    <dd><span>Banana, I love bananas.</span></dd>
    <dd><span>Pear</span></dd>
</dl>

＆＃13;

如何垂直对齐定义列表中的文本？

1 个答案: