javascript - 如何在 bootstrap 4 中居中对齐 div

Question

我试图将 div 对齐到 boostrap 4 中的页面中心，即使我尝试使用 margin:0 auto，它也不起作用； float:none 属性，它也不适用于该属性。我使用了 d-block mx-auto 类它也不起作用这是我的 html 代码

<div class="d-block mx-auto col-centered">
        <ul id="social_nav" class="clearfix d-block mx-auto">
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
        </ul>
    </div>

这是CSS代码

  .main_footer {
    background: linear-gradient(#563d7c,#4d366f);
    color: #fff !important;
    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    padding: 90px 0 130px 0;
    width: 100%;
    text-align: center;
}
footer #social_nav{
    float: none;
    list-style: none;
}

.footlist {
    color: #fff;
    float: left;
}

Answer 1

尝试为您的 div 设置一些 width。

.main_footer {
    background: linear-gradient(#563d7c,#4d366f);
    color: #fff !important;
    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    padding: 90px 0 130px 0;
    width: 100%;
    text-align: center;
}
footer #social_nav{
    float: none;
    list-style: none;
}

.footlist {
    color: #fff;
    float: left;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="d-block mx-auto col-centered" style="background:red; width: 100px;">
  <ul id="social_nav" class="clearfix d-block mx-auto">
    <li class="footlist"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
    <li class="footlist"><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>
    <li class="footlist"><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li class="footlist"><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
  </ul>
</div>