Question

我需要将p标签内的文本与垂直中间对齐。由于我为p标签赋予了高度，单行文本垂直对齐到p标签的顶部，但是当有2行描述时它是完美的。

高度30px应该保持不变。我将内容结束为2行，因此高度应该相同。

Answer 1

试试这个

p.event_desc{
    background: rgba(0,0,0,0.76);
    padding:10px 5px;
    position:absolute;
    top: 0px;
    color: #ffffff;
    font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 16px;
    margin: 0 4px 0 0; 
    width:93%; 
}

Updated Fiddle.

Answer 2

我认为你可以定义行高，这样你的演示就可以了。

当我在代码中实现了行高时，你的例子也正常工作。

p.event_desc{
    background: rgba(0,0,0,0.76);
    padding:4px;
    top: 0px;
    color: #ffffff;
    font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 30px;
    margin: 0 4px 0 0; width:93%; height:30px;
}

http://jsfiddle.net/ydFy5/8/

Answer 3

嘿，现在你可以定义 line-height：30px

就像这样

p.event_desc{
    background: rgba(0,0,0,0.76);
    padding:4px;
    position:absolute;
    top: 0px;
    color: #ffffff;
    font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 30px;
    margin: 0 4px 0 0; width:93%; height:30px;
}

现场演示http://jsfiddle.net/ydFy5/10/

Answer 4

您可以将空img引入p标记例如：

<img style="height:38px;" align="middle"/>

（图像的高度是高度加上p的边距）

jsFiddle update

将p标签垂直对齐到中间

4 个答案: