2

p タグ内のテキストを垂直方向の中央に揃える必要があります。p タグの高さを指定したので、1 行のテキストは 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

pタグに空の img を入れることができます。

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

(画像の高さは、高さに の余白を加えたものですp)

jsFiddle の更新

于 2012-07-02T07:05:04.540 に答える