Boostrap 3を使用して別のdivに中心divs、

私は別のdivに2つのdivを中央に配置したい（水平方向）。誰かが私にそれをどうすればできますか？私は外側のクラスでのdivの真ん中に、クラスのボックス左とボックス右の2つのdivを持つようにしたい：あなたは、ディスプレイを使用することができますBoostrap 3を使用して別のdivに中心divs、

<html> 
<head> 
    <style> 
     .container{ 
      background-color: blue; 
     } 
     .outer{ 
      text-align: center; 
     } 
     .width-600{ 
      width:600px;  
      text-align:left; 
      margin-right: auto; 
      margin-left: auto; 
     } 
     .box-left{ 
      background-color: yellow; 
     } 
     .box-right{ 
      background-color: green; 
     } 
    </style> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <div class="container"> 
     <div class="outer"> 
      <div class="row width-600"> 
       <div class="col-xs-12 col-md-4"> 
        <div class="box-left">left</div> 
       </div> 
       <div class="col-xs-12 col-md-8"> 
        <div class="box-right">right</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> </html>

出典

2016-12-07 Jimy Weiss

：曲がり、正当化 - コンテンツ：上に中心を。外側のクラスは、あなたのhtmlでこの体を交換する2つの行が

チェック次のスニペット

.container { 
 
    background-color: blue; 
 
} 
 
.outer { 
 
    display:flex; 
 
    justify-content:center; 
 
} 
 
.width-600 { 
 
    width: 400px; 
 
    
 
    
 
} 
 
.box-left { 
 
    background-color: yellow; 
 
} 
 
.box-right { 
 
    background-color: green; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 

 
<div class="container"> 
 
    <div class="outer"> 
 
    <div class="row "> 
 
     <div class="col-xs-12 col-md-4"> 
 
     <div class="box-left">left</div> 
 
     </div> 
 
     <div class="col-xs-12 col-md-8"> 
 
     <div class="box-right">right</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-12-07 20:52:31 Geeky

を中心うそれがあなたのために働くかどうかを確認してください。

<body> 
    <div class="container"> 
      <div class="row width-600"> 
       <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2"></div> 
       <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4"> 
        <div class="box-left">left</div> 
       </div> 
       <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4"> 
        <div class="box-right">right</div> 
       </div> 
       <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2"> 
      </div> 
     </div> 
    </div> 
</body>

出典

2016-12-07 21:05:19

Boostrap 3を使用して別のdivに中心divs、

答えて

関連する問題