html - 如何在 css 中将 <div> 水平居中？

如何使用 CSS 将这 3 个 div 在页脚中居中？我首先在 stackoverflow 中搜索这里，然后我尝试了 margin: 0 auto, text-align: center; display: inline-block; 但没有任何效果，所以我如何将这 3 个 div 置于页脚的中心？

我不能使用 flex。

/* ------- Footer ------*/
.footer-box{
    margin: 20px;
}
.footer-box > h1{
        color:#000000;
        font-size: 30pt;
        text-align: center;
        margin-bottom: 35px;
}

.footer-box > p{
        color:#303030;
        font-size: 18pt;
        text-align: center;
        margin-bottom: 50px;
}
.footer-social-box{
    width: 100%;
    line-height: 32px;
    text-align: center;
}
.footer-social{
    display: inline-block;
    float:left;
    width:32px;
    height: 32px;
    border:2px solid #606060;
    margin-right: 15px;

}

.img-twitter{
    background: url(../img/twitter.png) no-repeat center center scroll;
}
.img-facebook{
    background: url(../img/facebook.png) no-repeat center center scroll;
}
.img-instagram{
    background: url(../img/instagram.png) no-repeat center center scroll;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <footer>
        <div class="footer-box">
            <h1>SOCIAL</h1>
            <p>Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo.</p>
            <div class="footer-social-box">
                <div><a class="footer-social img-twitter" href="http://www.twitter.com" target="_blank"></a></div>
                <div><a class="footer-social img-facebook" href="http://www.facebook.com" target="_blank"></a></div>
                <div><a class="footer-social img-instagram" href="http://www.instagram.com" target="_blank"></a></div>
            </div>
        </div>

    </footer>
</body>
</html>

https://jsbin.com/yaficokodu/edit?html,css,output

最佳答案

这就是你所需要的:

.footer-social-box > div {
  display: inline-block;
}

anchor 元素的 div 包装器 (.footer-social) 是 block 级元素。这意味着它们占据了父级 (.footer-social-box) 的 100% 宽度。

当一个盒子占据了它容器的整个宽度时，它显然不能居中，因为没有可用空间。

在下面的代码中，.footer-social-box 的 div 子项需要是 inline-block。

<div class="footer-social-box">
    <div><a class="footer-social img-twitter" href="http://www.twitter.com" target="_blank"></a></div>
    <div><a class="footer-social img-facebook" href="http://www.facebook.com" target="_blank"></a></div>
    <div><a class="footer-social img-instagram" href="http://www.instagram.com" target="_blank"></a></div>
 </div>

关于html - 如何在 css 中将 <div> 水平居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43622780/

html - 如何在 css 中将 <div> 水平居中？

上一篇：jquery - 如何去掉 HTML 表格中行与行之间的空格？

下一篇：javascript - jquery 使用复选框禁用文本框(带复选框的多个文本框)