当动态添加内容时，如何在中心对齐div

Question

请看一下这张图片。

这里我使用Bootstrap来对齐div。并且只创建了一个div。内容从管理端动态添加到此div中。那么它将循环div。这很好。

但是在这里你只能看到6个内容可用。所以2个Div在左边对齐。我需要这些div应该在Page的中间对齐。如果内容为7或5，则第二行内容应位于中间。如何调整这些Divs Middle。请帮我解决这个问题。

这是我的代码..

<div class="col-sm-6 col-md-3"> <div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="100ms"> <img src="{{ 'assets/img/icon-services.png' |theme }} "> <h4>{{ service['name'] }}</h4> <p>{{ str_limit(service['description'], 100) }}</p> <a href="{{ url('services') }}/{{ service['slug'] }}" class="read-more">Read More</a> </div> </div>

先谢谢你。

Answer 1

将display: inline添加到子div，将text-align: center添加到父div。不要使用引导程序的col-md，因为它具有float: left属性

.parent {
  text-align: center;
}

.child {
  display: inline-block;
  width: 24%;
  border: solid 1px #123;
  height: 50px;
  margin: 0 auto !important;
}

<div class="parent" id="parent">
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

Answer 2

您可以使用bootstrap根据div的所需位置动态设置每个div的偏移量，或将div的余量设置为auto。有关详细说明，请参阅this帖子。