垂直方向のセンター寄せ
水平方向のセンター寄せはtext-align:center;でOK。では垂直方向の場合は？
これが今回のテクニックです。
テクニック使用後
文字が水平だけでなく垂直方向も真ん中にきてますよね
やり方
１：HTMLを書く
HTMLはこんな感じになります。
<p class="sample">
文字が水平だけでなく垂直方向も真ん中にきてますよね
<p>
２：スタイルシートを書く
サンプルのスタイルシートはこんな感じになります。
.sample{
border:double 3px #760014;
background-color:#ffffff;
border-width:3px 0px;
text-align:center;
width:100%;
height:30px;
line-height:30px;
}
解説
今回のポイントはline-height:30px;です。
line-heightの値をheightの値と同じにしてやるだけでサンプルのように垂直方向のセンター寄せが出来ます。
ただし、効果があるのは文字列が一行に収まる場合のみです。複数行になるならheightを指定せず上下のpaddingを同じにしてやった方が良いです。
このテクニックが効果を発揮するのは、文字列が一行で収まることの多い著作権部分や見出し、ulタグでメニューとの組み合わせなどです。paddingの値を調整する手間暇が無くなる＆バグ対策にもなる便利なテクニックです。
使いこなすための＋α
vertical-align:middleはダメ？
さて、垂直方向の位置ならvertical-alignでもいけるのでは？と思った人も多いのではないでしょうか。実際のところどうなんでしょう。
line-heightの代わりにvertical-align:middleを指定
vertical-align:middleじゃダメなのね
残念ながら上手くいきません。なぜかというとvertical-alignプロパティはインライン要素（span img）とテーブルのセルにしか効果を発揮しないからです。