コンテンツが動的に追加されたときに、センターのdivを整列する方法

Question

この画像をご覧ください。

ここでは、divを整列させるためにブートストラップを使用しました。そして、1つのdivだけを作成しました。コンテンツはこのdivに管理者側から動的に追加されます。 divをループします。それはうまく働いている。

ここでは6つのコンテンツしか表示されません。したがって、2つのDivsは左に揃えられます。私はこれらのdivがページの中央に整列する必要があります。コンテンツが7または5の場合、2行目のコンテンツは中央になければなりません。これらの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

子divにdisplay: inline、親divにtext-align: centerを追加します。それは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>

Answer 2

divの希望の位置に応じて、各divのオフセットを動的に設定したり、divの余白をautoに設定したりすることができます。詳細な説明については、thisポストを参照してください。