javascript - 如何在动态添加内容时居中对齐 div

Question

请看这张图片。

这里我使用 Bootstrap 来对齐 div。并且只创建了一个 div。内容是从管理员端动态添加到此 div 中的。然后它会循环div。一切正常。

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

这是我的代码..

<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。不要使用 bootstrap 的 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>