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

时间：2017-04-25 23:55:44

标签： html css

如何使用CSS将这3个div放在我的页脚中？ 我首先在stackoverflow中搜索，我尝试了margin: 0 auto，text-align: center; display: inline-block;并且没有任何作用，所以如何将这3个div放在页脚中？

我无法使用flex。

＆＃13;
＆＃13; 
/* ------- 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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

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

6 个答案:

答案 0 :(得分：3)

这就是你所需要的：

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

锚元素（.footer-social）的div包装器是块级元素。这意味着他们占据了父母宽度的100％（.footer-social-box）。

当一个盒子消耗其容器的整个宽度时，它显然无法居中，因为没有可用空间。

在下面的代码中，div的{​​{1}}个孩子需要.footer-social-box。

inline-block

答案 1 :(得分：1)

只需给这些div一个班级并将它们设置为display:inline-block;这是你演示的小提琴演示。 https://jsfiddle.net/mkf5k3Lt/1/

答案 2 :(得分：1)

将此添加到您的CSS：

.footer-social-box div{
display:inline-block;
margin:0 auto;
width:32px;
height: 32px;
margin-right: 15px;
}

这样做的目标是 footer-social-box 类中的div，居中，给它一个宽度，高度和边距。

完整代码如下：

＆＃13;
＆＃13; 
	/* ------- 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-box div{
    display:inline-block;
	margin:0 auto;
	width:32px;
    height: 32px;
	margin-right: 15px;
  border:1px solid #000000; /* placed only to see where divs are, can be removed */
}
	
	
.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;
}
＆＃13; 
    <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>
＆＃13;
＆＃13;
＆＃13;

让我知道这是怎么回事。

干杯

答案 3 :(得分：1)

更好如果您使用未排序的列表样式。看一看。

@import url(http://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
body {
    font-family: 'Lato', sans-serif;
    color: #FFF;
    background: #322f30;
    -webkit-font-smoothing: antialiased;
}
a {
    text-decoration: none;
    color: #fff;
}
p > a:hover{
    color: #d9d9d9;
    text-decoration:  underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin:  1% 0 1% 0;
}
._12 {
    font-size: 1.2em;
}
._14 {
    font-size: 1.4em;
}
ul {
    padding:0;
    list-style: none;
}
.footer-social-icons {
    width: 350px;
    display:block;
    margin: 0 auto;
}
.social-icon {
    color: #fff;
}
ul.social-icons {
    margin-top: 10px;
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
}
.social-icons a {
    color: #fff;
    text-decoration: none;
}
.fa-facebook {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-facebook:hover {
    background-color: #3d5b99;
}
.fa-twitter {
    padding:10px 12px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-twitter:hover {
    background-color: #00aced;
}
.fa-rss {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-rss:hover {
    background-color: #eb8231;
}
.fa-youtube {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-youtube:hover {
    background-color: #e64a41;
}
.fa-linkedin {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-linkedin:hover {
    background-color: #0073a4;
}
.fa-google-plus {
    padding:10px 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-google-plus:hover {
    background-color: #e25714;
}
<div class="footer-social-icons">
    <h4 class="_14">Follow us on</h4>
    <ul class="social-icons">
        <li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-rss"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
        <li><a href="" class="social-icon"> <i class="fa fa-google-plus"></i></a></li>
    </ul>
</div>

点击here！

答案 4 :(得分：0)

检查此代码

  /* ------- Footer ------*/
  .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-box > div{
    background: red; /*remove*/
    margin: auto;
    display: inline-block;
  }
  .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;
  }

方面

答案 5 :(得分：0)

社交图标浮动使div容器看起来有点空。见下文

* ------- 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-box > div{
    display: inline-block;
}
.footer-social{
    display: block;
    width:32px;
    height: 32px;
    border:2px solid #606060;
    margin-right: 15px;

}
.footer-social {
    text-align: center;

}

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

相关问题
最新问题