<p> 标签内垂直对齐

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>容器内左上角对齐，但应该在左中。我尝试了一些 技巧， 例如更改行高并将显示更改为表格单元格，然后应用垂直对齐属性，但它们都没有真正起作用。

提前致谢！

Answer 1

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