css - h3 のテキストを高さで中央揃え

Question

だから私は持っているh3

<h3>someText<h3>

にはh3高さと背景画像があります

h3
{
height:30px;
background-image:url();
background-reat: repeat-x;
}

今、テキストを要素の中央に揃えたいのですh3が、常にテキストを上に浮かせます: ここに画像の説明を入力

どうすればこれを達成できますか？

score 8 · Accepted Answer

line-heightをに一致するように設定しheightます。

h3
{
height:30px;
line-height:30px;
background-image:url();
background-reat: repeat-x;
}

score 3 · Accepted Answer

<h3>要素に複数行のテキストが含まれている場合line-height、他の回答で示唆されているようにプロパティを設定しても機能しません。

をサポートする必要がない場合は、次のプロパティと組み合わせてlteIE7使用できます。display: table-cellvertical-align

h3 {
  background-color: whitesmoke;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

score 2 · Accepted Answer

2

簡単に追加できますline-height:30px;

于 2013-02-21T17:14:41.460 に答える

score 1 · Accepted Answer

line-heightこれを解決するために使用します

h3 {
    height:30px;
    background-image:url();
    background-reat: repeat-x;
    line-height: 30px;
}

score 0 · Accepted Answer

h3 {
    ...
    /* those 2 lines are what you need */
    line-height:30px;
    vertical-align:middle;
    ...
}

5 に答える 5