スタイルシートでの文字位置の指定

質問

正方形の中心に文字があるようなデザインにしたくて
次のように記述したのですがうまくいきません。

.text{
height : 160px;
width : 160px;
color : #FFFFFF;
padding: 0px;
margin: 0px;
background-color: #6C3C1F;
font-size: 15pt;
text-align: center;
vertical-align: middle;
font-weight: bold;
}

横位置はきちんと中央揃えになりますが、
縦の位置は文字が正方形内で上揃えになってしまいます。
どうすれば希望のデザインにできるか教えてください。
よろしくお願いします。

回答No.1

BLUEPIXY · ベストアンサー

vertical-alignの指定は、
インライン要素をその行の中で縦方向のどの位置に配置するかを指定するものです。
例えば、イメージとテキストのベースラインを縦方向中央にします。
ｔｄ要素（テーブルの中のセルでの縦位置）には有効ですので、セルが１つだけのテーブルを作ることで同様の効果を得ることができます。

お礼

やっぱりテーブルを組むのが一番手っ取り早いんですね。
インライン要素の説明、とても端的でわかりやすかったです。
いままできちんと理解できていなかったので……。
どうもありがとうございました。

回答No.2

noname#107580

こんにちは！

.text{
height : 160px;
width : 160px;
color : #FFFFFF;
background-color: #6C3C1F;
font-size: 15pt;
text-align: center;
font-weight: bold;
padding-top: 70px;
}

面倒ですが、上か下から距離の指定しかないかも・・

お礼

距離指定だと微妙に中心からずれてしまいそうな気がしてしまいます。
右下寄せなどのレイアウトをしたいときなどに使わせていただきますね。
（テクニックが一つ増えましたｗ）
ご回答ありがとうございました。