2

我需要将 p 标签内的文本垂直居中对齐。由于我已经为 p 标签指定了高度，因此单行文本垂直对齐到 p 标签的顶部，但是当有 2 行描述时，它是完美的。

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

这是演示 http://jsfiddle.net/ydFy5/1/

4

4 回答 4

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

更新了小提琴。

于 2012-07-02T07:02:02.450 回答
0

我认为您可以定义行高，这将适用于您的演示。

当我在您的代码中实现 line-height 时，您的示例也可以正常工作。

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/

于 2012-07-02T07:02:41.417 回答
0

嘿，现在你可以定义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/

于 2012-07-02T07:03:00.633 回答
0

您可以将一个空的 img 放入p标签中，例如：

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

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

jsFiddle 更新

于 2012-07-02T07:05:04.540 回答