0

クリック可能な画像をフッター領域の中央に配置しようとしています。ChromeとFirefoxでテストしましたが、フッター全体をクリックできます。Chromeインスペクターは、要素を高さ0ピクセル、幅0ピクセルとして表示します。私は何が間違っているのですか？

PS：私はTwitterBootstrapを使用しています

CSSは次のとおりです。

body {
    margin:0;
    padding-top: 0px;
    margin-bottom: 20px;
}

#footerLogo { 
    display:block;
    margin-left: auto;
    margin-right: auto;
    width: 73px;
}

#footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color:red;
}

HTMLは次のとおりです。

<div id="footer">
    <a href="#"><img id="footerLogo" src="/images/footer.gif"></a>
</div>
4

3 に答える 3

2 
<div id="footer">
    <a href="#"><img id="footerLogo" src="/images/footer.gif" /></a>
</div>

img 要素をどのように閉じたかに注意してください />

クリック可能なフッター全体の問題はdisplay: block 、img の余白も削除することです。

#footerLogo { 
    display:block;  //this line - take it out
    width: 73px;
}

中央に配置したい場合は、中央に配置します<a>

#footer a {
position: relative;
margin: auto;
width: 74px; //this may be necessary for IE7
}
于 2013-01-11T15:21:12.140 に答える
2

ブロックはタグをボックスに設定し、親コンテナー全体を占有するため、 に追加してその中の要素の中央揃えをマークし#footer、に追加して-を削除します。text-align: centermargin: 0 auto#footerLogodisplay:block<a>

http://jsfiddle.net/T4PSS/

于 2013-01-11T15:29:00.700 に答える
0

これはあなたが使用しているためです

margin-left:auto;
margin-right: auto;

幅が指定されていない場合id="footerLogo"は、<a>代わりに次のように適用します。

<style>
    body {
        margin:0;
        padding-top: 0px;
        margin-bottom: 20px;
    }

    #footerLogo {
        display:block;
        margin:0 auto;
        width: 200px;
    }

    #footer {
        position: fixed;
        bottom: 0px;
        width: 100%;
        padding-top: 5px;
        padding-bottom: 5px;
        background-color:red;
    }
</style>

HTML:

<div id="footer">
    <a id="footerLogo" href="#"><img src="/images/footer.gif" /></a>
</div>
于 2013-01-11T15:14:56.943 に答える