html - 标签内垂直对齐

Question

我有这个 html:

<div id="workAllocated">
    <h3>Work Allocated</h3>
    <p>Lorem Ipsum</p>  
    <p>Lorem Ipsum</p>  
</div>

以及以下 CSS:

div#contentarea.profile_edit div {
    margin-bottom: 20px;
}
div#contentarea.profile_edit div.col_01 h3 {
    font-size: 2.4em;
    margin: 0;
}
div#workAllocated p {
    margin-bottom: 0px;
    border-bottom: 1px solid red;
}

结果看起来像这个快照:

但我需要它看起来像这样:

不同的是 <p> 中文本的垂直对齐方式标签。它在 <p> 内左上对齐容器，但它应该是中间偏左的。我试过一些 tricks例如更改行高并将显示更改为表格单元格，然后应用垂直对齐属性，但它们都没有真正起作用。

提前致谢!

Answer 1

为您的 p 设置高度，然后将行高设置为等于该高度。