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

这里我使用Bootstrap来对齐div。并创建只有一个分区。内容从管理端动态添加到该div中。那么它会循环div。这工作正常。

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

这里是我的代码..

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

预先感谢您。

来源

2017-07-07 Melbin Mathai

可以请你加你已经尝试了什么到现在 – Geeky

可以告诉你，你已经在迄今为止 –

@Geeky工作的代码，请看一看。代码被添加。 –

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

.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>

来源

2017-07-07 05:58:19 Duannx

Great Work。谢谢。 –

欢迎您！ – Duannx

您可以使用引导程序根据div的所需位置动态设置每个div的偏移量，或将div的边距设置为auto。有关详细说明，请参见this。

来源

2017-07-07 05:19:33 rhino2rhonda

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

回答

相关问题