中心对齐DIV内的框

Question

我有以下方框设计。

这些绿色框在“col-md-10”div内动态生成。在第二行，如果没有3个盒子，我想对齐盒子。在下面的例子中，我希望在“Weekly”框下面有“Bi-monthly”框。

Answer 1

<div class='col-md-10 text-center'>
  <div class='col-md-4 text-center'>1</div>
  <div class='col-md-4 text-center'>1</div>
  <div class='col-md-4 text-center'>1</div>
  <div class='text-center center-block' style='width: 33.33333333%;'>1</div>
</div>

这是我使用bootstrap 3.x完成的。这很好用。第4块你不能拥有类名col-md-4。试试这个。它有效。

在此示例中，text-center和center-block是引导类。

另外，尽量减少内联样式的使用。因为，在bootstrap中，所有这些东西都有内置的类名。如果您使用的是bootstrap，请完全使用它。 干杯

Answer 2

你的意思是？

<article class="col-md-12">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 img">...</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 img">...</div>
</article>

article{
text-align:center;
}

article .img{
display: inline-block;
float: none;
vertical-align: text-top;
}

请尝试查看这是否对您有所帮助。

Answer 3

你说

  

这些绿色框在“col-md-10”div

内动态生成

所以你需要检查条件你的动态数据长度，我希望你想连续显示3个块，然后如果你想要在一行中设置一个块。您需要检查动态数据长度和可分3以检查可以是单个块.... 在下面我用col-xs-4因为stackoverfow片段显示太小了....

var data = ['One','Two','Three','Four'];
var last = data.length - 1;
data.forEach((v,i) => {
  var div = "<div class='col-sm-6 col-xs-4 col-md-4 bg-info '>"+v+"</div>";
  
  if((last == i) && (i % 3 == 0)) {
    div = "<div class='col-xs-offset-4 col-sm-6 col-xs-4 col-md-4 bg-info '>"+v+"</div>";
  }
  
  $(".test .row").append(div);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
  <div class="row">
      <div class="col-md-10 test"><div class="row"></div></div>
  </div>
 </div>

Answer 4

我知道你正在使用Bootstrap。

但是你可以使用CSS Flexbox非常优雅和简洁地处理这个问题。

工作示例：

ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 0 60px;
padding: 0;
list-style-type: none;
}

li {
flex: 0 0 calc(33vw - 36px);
margin: 6px;
padding: 6px;
text-align: center;
border: 1px solid rgb(191, 191, 191);
}

<h1>Keep Scrolling down...</h1>

<ul>
<li>One-off</li>
<li>Weekly</li>
<li>Fortnightly</li>
<li>Bi-monthly</li>
</ul>

<ul>
<li>One-off</li>
<li>Weekly</li>
<li>Fortnightly</li>
<li>Bi-monthly</li>
<li>Quarterly</li>
</ul>

<ul>
<li>One-off</li>
<li>Weekly</li>
<li>Fortnightly</li>
<li>Bi-monthly</li>
<li>Quarterly</li>
<li>Half-yearly</li>
</ul>

Answer 5

使用此代码

<div class='col-md-10 text-center'>
      <div class='col-md-4 text-center'>1</div>
      <div class='col-md-4 text-center'>1</div>
      <div class='col-md-4 text-center'>1</div>
      <div class='col-md-4 offset-md-4'>1</div>
    </div>