수량을 상관없이 div를 항상 중앙에 수평으로 유지하십시오.

Question

나는 div 수를 아무리 많은 수의 가끔 중앙에 유지하기 위해 깨끗한 CSS + html 방법을 정의하려고 시도합니다. 가끔은 하나이지만 때로는 3 또는 4가됩니다.

<div class="row"> 
     <div class="col-xs-3" style="background-color: red;"> -1- </div> 
     <div class="col-xs-3" style="background-color: blue;"> -2- </div> 
     <div class="col-xs-3" style="background-color: green;"> -3- </div> 
     <div class="col-xs-3" style="background-color: yellow;"> -4- </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-3" style="background-color: red;"> -1- </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-3" style="background-color: red;"> -1- </div> 
     <div class="col-xs-3" style="background-color: blue;"> -2- </div> 
     <div class="col-xs-3" style="background-color: green;"> -3- </div> 
    </div> 

현재 재생할 수 있습니다 : http://www.bootply.com/iSkvWiFFjR

당신이 div의 왼쪽에 항상 볼 수있는 것처럼, 그들을 유지하는 방법이 항상 상관없이에게에이 문제를 해결할 수, 어쩌면 래퍼를 중심으로 행 div?

Answer 1

은 행과 그것을 중심으로 만들기 위해 COL에 클래스를 추가 : 3 열 걸쳐 아무것도 중앙 수 없습니다 그러나, 짝수이어야한다. 이 사이트에서 언급 한 바와 같이 : Center divs with Bootstrap 3

.row-centered { 
    text-align:center; 
} 
.col-centered { 
    display:inline-block; 
    float:none; 
    /* reset the text-align */ 
    text-align:left; 
    /* inline-block space fix */ 
    margin-right:-4px; 
} 

<div class="row row-centered"> 
    <div class="col-xs-3 col-centered" style="background-color: red;"> -1- </div> 
</div> 

Answer 2

열을 col-xs-offset-* 클래스로 오프셋해야합니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: red;">-1-</div> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: blue;">-2-</div> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: green;">-3-</div> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: yellow;">-4-</div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: red;">-1-</div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: red;">-1-</div> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: blue;">-2-</div> 
 
    <div class="col-xs-offset-4 col-xs-4" style="background-color: green;">-3-</div> 
 
</div>

Answer 3

flexbox를 사용하면됩니다. 이 코드는 여러분이 원하는대로 행동해야합니다.

.row { 
    display: flex; 
    justify-content: center; 
    flex-direction: row; 
} 

.col-xs-3 { 
    width: 25%; 
    margin: 0; 
}