2017-12-30 29 views
0

私はmargin:0 auto; float:noneプロパティで試しても動作していないので、divをブーストラップ4のページの中央に揃えようとしています。私はこれはこれはブートストラップでdivを中央揃えにする方法

.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; 
} 
+0

を追加することによって、自分を気にいけないということ。フラックスの少しを学び、整列とあなたの人生の残りの部分を容易にする。 – DragonKnight

答えて

0

があなたのdivにいくつかのwidthを設定してみCSSコードである

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

私のhtmlコードである、それはまた、動作していないd-block mx-autoクラスを使用していました。あなたが行うことができます

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

0

クラス

.col-centered{ 
    border: 1px solid; 
    height: 150px; 
    width: 400px; 
    margin: 0; 
    background: yellow; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%) 
} 

.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; 
 
} 
 
.col-centered{ 
 
    border: 1px solid; 
 
    height: 150px; 
 
    width: 400px; 
 
    margin: 0; 
 
    background: yellow; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%) 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    
 
    <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>

関連する問題