ブロック要素内のテキストのセンタリング

質問

HTMLとCSSを使いマウスオーバー処理をしてマウスを重ねると背景の色が変わる 190ピクセル×125ピクセル のボタンを作りました。テキストがない部分をクリックしてもリンク先にジャンプできるように「display: block;」でブロック要素にしています。

一つ困ったことがありまして、「vertical-align」を使ってもブロック要素内の「トップページへ戻ります。ここをクリックして下さい」という文章がボタン内で縦方向にセンタリングできないのです。

「line-height」を「height」の値に合わせる方法もやってみましたが、文章が2行に渡るためできませんでした。文章の長さはボタンにより異なり複数行に渡る事もあるため文章を1行にするという方法は選べません。

JavaScriptは勉強したことがないので詳しく分かりませんが、JavaScriptを使えば私がやろうとしていることはできますでしょうか？
どなたかお知恵をお貸し下さい、よろしくおねがいします。

HTML****************************************************************
…（省略）…
<div class="button">
<a href="index.html">トップページへ戻ります。<br>ここをクリックして下さい</a>
</div>
…（省略）…

CSS*****************************************************************
.button {
width: 190px;
font-weight: bold;
text-align: center;
}
.button a{
min-height: 125px;
background: #FFEF6D;
display: block;
color: #F00;
font-weight: bold;
text-decoration: none;
}
.button a:hover{
background: #FC0;
text-decoration: none;
}
.button a:acyive{
background: #FFEF6D;
text-decoration: none;
}

回答No.1

steel_gray · ベストアンサー

Javascriptを使った手法はとりあえずパスさせてもらいますが参考までに。

高さを指定したブロック内の要素を縦方向にセンタリングする事はできません。

例外的にテーブルのセルでは可能で、CSSで
display:table-cell;
と、指定すればいいのですが、この指定にIEが対応していないので現実的ではないです。

私がよくやるのは、高さを指定せずにブロックのpaddingで高さを稼ぎます。（正確に高さをコントロールする事はできませんが）
a:{
display:block;
text-align:center;
padding:1em;
他略
}

なお、vertival-alignは「インライン要素の縦方向の調整」の為のプロパティです。
例）それぞれimgやstrongが「行の中央」に配置されます。
テキスト<img style="vertical-align:middle;">テキスト<br>
テキスト<strong style="font-size:200%;vertical-align:middle;">テキスト</strong>テキスト<br>
※テーブルのセルに限り、ブロック内の要素の配置指定になります。

お礼

steel_gray様アドバイスありがとうございます。

＞高さを指定したブロック内の要素を縦方向にセンタリングする事はできません。

そうなのですか…、残念です。「table-cell」がIEが対応していないのは確かに使うのは躊躇しますね。

＞vertival-alignは「インライン要素の縦方向の調整」の為のプロパティです。

なるほど、「vertical-align」はテーブルで主に使っていたのではじめて知りました、勉強になりました。

回答No.2

noname#66720

検証してないので多少怪しいですが、試しに下の要素を追加してみてください。
たしかボックス内で縦方向をセンタリングする指定だったはずです。

.button {
display:table-cell;
vertical-align:middle;
/*/*//*\*//*/
display:inline-block;
/* */
}

.button, {
#display:inline;
#zoom:1;
}

お礼

metametamu様回答ありがとうございます。

さっそく教えていただいたCSSを追記してみましたが、縦方向のセンタリングはできなく変化なしでした…。