0

我试图在页脚区域居中放置一个可点击的图像。我已经在 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>
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

添加到#footeratext-align: center以标记其中元素的居中，并添加margin: 0 auto到#footerLogo并删除display:block- 因为该块将<a>标签设置为 box 并占据整个父容器。

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 回答