标签内垂直对齐答案

【问题标题】：Vertical Align inside tag 标签内垂直对齐
【发布时间】：2013-05-02 19:36:47
【问题描述】：

我有这个 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;
}

结果如下图所示：

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

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

提前致谢！

【问题讨论】：

我怀疑您真的想为此使用表格，因为您的示例看起来像表格数据。
padding 或 line-height

标签： html css

【解决方案1】：

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

【讨论】：

设置高度通常是不安全的。如果将文本大小设置为大于您的预期，则其中一些可能会被截断。
设置字体大小也有帮助。
@mario595，您将很难使用 P 标签找到令人满意的 CSS 解决方案。这看起来像表格数据，一个表格用vertical-align是没有问题的，所以我真的认为你应该使用表格。
谢谢，效果很好。我正在更改行高，但我没有设置
的高度，所以它不起作用。

【解决方案2】：

这对我有用：http://codepen.io/anon/pen/LrEcx

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

div#workAllocated p {
    margin: 0px;
    line-height: 1;
    border-bottom: 1px solid red;
    padding: 2px 0;
}

</style>

</head>
<body>

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

</body>
</html>

【讨论】：

【解决方案3】：

只需为 p 添加一个高度并调整你的 line-height

Fiddle.

//EDIT// 哎呀刚刚看到另一个anwser

【讨论】：