无法获得中心的div

Question

我不知道我设法改变了什么,但就在那时我正在使用的一个div不会居中,我的html在下面

<div id="footer">
   <p>foo</p>
</div>

我的css在这里,

#footer {
    width: 90%;
    font-size: 16px;
    text-transform: uppercase;
    background: #EBEBEB;
    color: #3B3738;
    padding: 0.3%;

    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    text-align: center;

    margin: 0 auto;
    display:inline-block;
    font-family: 'Dosis', sans-serif;

    font-weight: 300!important;



}

我已经尝试了许多已经提供的解决方案,但他们似乎并没有把它放在中心位置.

经过一些测试,看起来它与这个Jquery脚本有关,https: //css-tricks.com/snippets/jquery/jquery-sticky-footer/这是在页脚上添加以下样式position: absolute;

编辑:我解决这个问题只需将其添加到CSS,我不确定为什么它会工作但它确实如此,

left: 0;
right: 0;

Answer 1

用display:block;而不是display:inline-block;.这将解决它

如果inline-block您的布局需要使用,那么我建议使用flexbox或float代替.

#footer {
    width: 90%;
    font-size: 16px;
    text-transform: uppercase;
    background: #EBEBEB;
    color: #3B3738;
    padding: 0.3%;

    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    text-align: center;

    margin: 0 auto;
    display:block;
    font-family: 'Dosis', sans-serif;

    font-weight: 300!important;

}

<div id="footer">
   <p>foo</p>
</div>