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% "MS Pゴシック", 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;
}
-------------------------------------
お礼
ありがとうございました。 <div>を使えばよかったんですね! 非常に役に立っています。