Question

我试图定义一个干净的css + html方式来保持div总是居中，不管有多少，有时候有一个，但有时候是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中添加类以使其居中。如本网站所述：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-*类来抵消列。但是，您不能将任何跨越3列的内容居中，它必须是偶数：

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

无论数量多少，保持div始终水平居中

3 个答案: