55

p要素内のテキストを垂直方向に中央揃えにする方法を知りたいです。

ここに私のスタイルがあります：

p.event_desc {
     font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
     line-height: 14px;
     height: 35px;
     margin: 0px;
}
<p class="event_desc">Lorem ipsum.</p>

4

11 に答える 11

72

これらのスタイルを試してください: 

p.event_desc {
  font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 14px;
  height:75px;
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
  border: 1px solid #f00;
}
<p class="event_desc">lorem ipsum</p>

于 2012-06-15T13:55:08.853 に答える
31

あなたはそのために使うことができますline-height。pタグの正確な高さに設定するだけです。

p.event_desc {
  line-height:35px;
}
于 2012-06-15T13:52:55.403 に答える
1

あなたが使用できる

    line-height:35px;

アクセシビリティに適していないため、段落に高さを設定するべきではありません（ユーザーがテキストサイズを大きくするとどうなるかなど）

代わりに、高さのある Div と、その中の p を正しい行の高さで使用します。

    <div style="height:35px;"><p style="line-height:35px;">text</p></div>
于 2012-06-15T15:09:55.477 に答える