0

次の要素があります。

<div class="menubar">
    <a class="homebutton" href="mydomain.com/home"></a> 
</div>

このスタイルの使用:

.menubar {
    text-align:center;
    background-image:url(/img/menubar_background.png);
}

.homebutton
{
    display: block;
    width: 139px;
    height: 23px;
    background: url("/img/home_button_rollover.png") no-repeat 0 0;
}

.homebutton:hover
{ 
    background-position: 0 -23px;
}

私が達成しようとしているのは、メニューバーをコンテンツの中央に配置し、ボタンを CSS ロールオーバーにすることです。問題は、この正確なコードを使用したボタンが中央ではなく左に配置されたままになることです。

解決済み (j08691):

.homebutton
{
    display: inline-block;
    margin:0 auto;
    width: 139px;
    height: 23px;
    background: url("/img/home_button_rollover.png") no-repeat 0 0;
}

作品: http://jsfiddle.net/j08691/WdQfk/1/

4

1 に答える 1

2

に追加margin:0 auto;し.homebuttonます。

ブロック要素を中央に配置するには、幅が必要であり (幅がある)、左右のマージンを auto に設定する必要があります0 auto。

jsFiddle の例

于 2013-05-22T18:56:54.540 に答える