html - h2要素と左右の境界線を揃えるのに問題があります

Question

理想的には、垂直方向の中点を介して左右の境界線に揃える必要がある h2 要素があります。試してみましたがpadding、何も機能してvertical-align:middleいないようです。アイデア？

ありがとうございました。

jsfiddle

Answer 1

プロパティはこれらのプロパティの影響を受けるため、要素に宣言を移動しfont-sizeて追加しました。line-height#titlevertical-align

#save-the-date #title {
  padding-left: 80px;
  text-align: center;
  width: 800px;
  font-size: 180%;
  line-height: 150%;
}

幅を固定したい場合を除き、h2 をインライン表示スタイルとして宣言するだけで済みます。その場合は、インライン ブロックと幅を使用します。

#save-the-date #title h2 {
  display: inline;
}

次に、両方のスパンに対して単一のルールを設定できます。不要なバックグラウンドの余分な宣言を削除しました。

#save-the-date #title span {
  display: inline-block;
  background: #333333;
  width: 300px;
  height: 3px;
  vertical-align: middle;
}​

更新されたフィドル: http://jsfiddle.net/QjUw2/

Answer 2

Line Height プロパティを使用してみる

h2 { line-height: *font-size* }

CSS の行の高さを確認してください。