Question

我正在尝试将可点击图片放在页脚区域中心。我已经在Chrome和Firefox上进行了测试，整个页脚都是可点击的。 Chrome检查器将元素显示为0像素高，0像素宽。我做错了什么？

PS：我正在使用Twitter Bootstrap

这是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>

Answer 1

<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
}

Answer 2

添加到#footer一个text-align: center以标记其中元素的中心，并margin: 0 auto添加到#footerLogo并删除display:block - 因为块集<a>标记为框并占据整个父容器。

http://jsfiddle.net/T4PSS/

Answer 3

这是因为你正在使用

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>

页脚中的图像和链接宽度

3 个答案: