CSSでロールオーバーを作って中央揃えにしたい。

質問

CSSを使ってロールオーバーを作成しました。
がんばっているのですが、なかなか難しく、壁ばかりです。

なんとか、ロールオーバーは出来たのですが、その画像が左揃えになっていて、中央揃えにならないのです。

どなたか、お力をお貸しください。よろしくお願い致します。

HTML
-----------------------------------
<link href="css.css" rel="stylesheet" type="text/css">
<div class="contents_box2">
<h3 class="no"><a href="info.html"><img src="contents_img2_1.jpg" alt="教室のご案内" width="215" height="53" /></a></h3>
<p class="contents_text2">ああああああああああああああああああああああああああああああああああああああああああああああああ
<p class="contents_text2">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<p class="contents_text2"><br />
<div class="rollover01"><a href="info.html"><img src="button2.jpg" alt="詳しくはこちら" width="172" height="29" /></a></div>
<img src="contents_img2_3.jpg" width="215" height="18" /></div>
--------------------
css↓↓↓
-------------
BODY {
COLOR: #666666;
TEXT-ALIGN: center;
margin-top: 0px;
font: 12px/130% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
IMG {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
VERTICAL-ALIGN: bottom;
BORDER-LEFT: 0px;
BORDER-BOTTOM: 0px;
margin: 0px;
padding: 0px;
}
.contents_box2 {
FLOAT: left;
MARGIN: 0px 12px 0px 0px;
WIDTH: 215px;
TEXT-ALIGN: left;
padding: 0px;
background: url(contents_img2_2.jpg) repeat-y;
}
.contents_text2 {
MARGIN: 10px 16px 0px
}
.contents_detail {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
WIDTH: 215px;
PADDING-TOP: 0px;
TEXT-ALIGN: center
}

.rollover01 {
width:172px;
height:29px;
background:url(img/button3.jpg) no-repeat center bottom;
text-align: center;
}
.rollover01 a {
display:block;
width:172px;
height:29px;
font-size:1px;
line-height:1px;
outline:none;
text-align: center;
}
.rollover01 a:hover {
text-indent:-9999px;
}
-------------------------------------

回答No.2

abril · ベストアンサー

> ロールオーバーは出来たのですが、その画像が左揃えになっていて、中央揃えにならないのです。

…と仰っているところを見ると、
<div class="rollover01"><a href="info.html"><img src="button2.jpg" alt="詳しくはこちら" width="172" height="29" /></a></div>
のブロック(a)を、
<div class="contents_box2">のブロック(A)（W215px)に対して水平方向にセンタリングになる様に配置したい、という解釈で宜しいでしょうか？
もしそうであれば、(a)の親要素である(A)に"TEXT-ALIGN: left;"と定義されている為、子要素(a)は当然の結果としてそのプロパティを継承し左寄せになります。
(a)を(A)の幅に対してセンタリングさせたいのであれば：

.rollover01 {
（省略）
margin: 0 auto;←追加
}

として下さい。これで、IE6以外の主要モダン・ブラウザではセンタリングになります。
上記の定義は、親要素(A)の幅に対して左右均等なマージンを取る（結果としてセンタリング配置になる）、という様な意味と解釈して下さい。
※ちなみにロールオーバーということであれば、button3.jpgはbutton2.jpgとのセットのoff/on画像でしょうからbutton3.jpgの画像自体がW172px・H29px、だと思われます。であれば、上記セレクタ中の"text-align: center;"は不要です（ブロックの幅と画像の幅自体が同一なので、centerだろうがleftだろうが結果は同じ）。

ところが、残念ながらIE6では仕様にバグがありこの"margin: auto;"が効きません。なので、この様な場合大概IE6用対策として、更に直近の親要素に"text-align: center;"を定義して子要素をセンタリングさせる、という手法が取られます。つまり今回の場合だと：

.contents_box2 {
（省略）
TEXT-ALIGN: left;→"text-align: center;"に変更
（省略）
}

とすれば、IE6上でも同様の結果が得られます。

ただし、そうなると今度は親要素(A)のスタイルを継承して現在は左寄せになっている<p class="contents_text2">のブロックのテキストがセンタリングになってしまいます。それを元に戻す為には、更に：

.contents_text2 {
text-align: left;←追加
（省略）
}

と定義を追加してやる必要があります。

以上で解決はしますが、ちょっと他の問題点が見受けられます。

■<img src="contents_img2_3.jpg" width="215" height="18" />という様な記述をしているところを見ると、XHTMLだと思いますが、それにしては書式が正しく統一されていません。

<link href="css.css" rel="stylesheet" type="text/css">
→<img～ />や<br～ />と同様、空要素は<link href="css.css" rel="stylesheet" type="text/css" />という様に閉じなければいけません。

<p class="contents_text2">テキスト
<p class="contents_text2">テキスト
<p class="contents_text2"><br />
→終了タグ</p>は省略できません。

■ロールオーバーのさせ方がこの仕様である必然性が感じられません（間違っている、というわけではないのですが）。

.rollover01 a:hover {
text-indent:-9999px;
}

上記定義で、マウスオーバー時に<img src="button2.jpg" alt="詳しくはこちら" width="172" height="29" />（off画像）を表示領域外に追いやることで<a>の背景画像として設定しておいたbutton3.jpgの方（on画像）を表示させる、というやり方の様ですが、であれば：

HTML側にはテキストリンクを置いて
<div class="rollover01"><a href="info.html">詳しくはこちら</a></div>
とした上で、CSSでは：

.rollover01 a {
（省略）
background:url(button2.jpg) no-repeat center bottom;←マウスオーバーでない時はリンクの背景としてbutton2.jpgを表示
}
.rollover01 a:hover {
（省略）
background:url(img/button3.jpg) no-repeat center bottom;←マウスオーバー時はリンクの背景としてbutton3.jpgを表示
}
.rollover01 {
（省略）
text-indent:-9999px;←HTML側のテキストリンクを表示領域外に追いやる（非表示にする）
}

…とした方が理にかなっていると思いますが。
こういった"text-indent:-9999px;"を使うロールオーバーの手法は大概、HTML側ではテキストリンクとしてマークアップ（色々メリットがあるので）しておいて、CSSによって「テキストを事実上非表示＆<a>の背景として画像を定義する」ことで画像リンクの様に表示させる、という為に使われますので。
多分、色々なtipsがちょっとごちゃ混ぜになった状態で試行錯誤されているのではないかと思われます。それぞれのプロパティの意味・性質、またどういった要素に対して有効であるか、といった事を基礎から学び直される事をお奨めします。XHTMLの文法も。
※そもそも今回のセンタリング問題についても、全体を見直せばHTMLもCSSももっとすっきり無駄なく構成する事が可能なのですが、それはおいおい学んで改良してみて下さい。今回はあくまで現状に対しての問題解決の為の最小限の修正です。

お礼

ありがとうございます。

そうなんですよね～。ずばりなんです。少しかじった程度で、他のサイトを見て真似て、いじくり回して、お手上げ状態ってのが本音なんですね。

説明がとてもわかりやすく助かりました。ありがとうございました。

回答No.3

abril

もう一案。こっちの方が（現状から）修正する部分は少なくて済みますね。

.rollover01 {
width:172px;←削除
height:29px;←削除
background:url(img/button3.jpg) no-repeat center bottom;
text-align: center;
}
.rollover01 a {
（省略）
margin: 0 auto;←追加
}
※.rollover01 {～}から幅と高さと削除しても、その子要素の<a>が、.rollover01 a {～}でブロック要素化され幅と高さの値が固定値で与えられているので、レイアウトに影響はありません。

これだけです。考え方の基本は先程と同じです。親要素である<div class="rollover01">～</div>(a)の幅を成り行きにすれば、更に親要素である<div class="contents_box2">～</div>(A)の幅を継承するので(a)の幅＝(A)の幅となります。で、その子要素の<a>に対して"margin: 0 auto;"を追加すれば(a)の幅＝(A)の幅の中でセンタリング配置となり、(a)のスタイルには既に"text-align: center;"が設定されているのでIE6用対策もここだけで完結する為、<div class="contents_box2">～</div>という親要素の他のコンテンツのスタイルに影響を与えません。

回答No.1

ganko3

<h3 class="no"><a href="info.html"><img src="contents_img2_1.jpg" alt="教室のご案内" width="215" height="53" /></a></h3>
のところだけですが、

<h3 class="no" align="center"><a href="info.html"><img src="contents_img2_1.jpg" alt="教室のご案内" width="215" height="53" /></a></h3>
に変更してください。

align="center"を入れるだけです。