ページの中央に4つのDIVを配置する

Question

4つのdivを並べて表示するコンテンツページがあります。

現在、divは左に固執しています。

私はdivをコンテナにラップしようとしましたが、その中心をテキスト整列しようとしましたが、動作しません。ここ

は私が他のすべてのクラス/ MAC /アンドロイド/ IOSは 同じですいくつかの画像URLのetc

#downloads { 
 
    text-align: center!important; 
 
} 
 

 
.dl-buttons { 
 
    text-align: center!important; 
 
} 
 

 
- I know this is duplicate but was testing .windows a { 
 
    width: 190px; 
 
    height: 190px; 
 
    display: inline-block; 
 
    float: left; 
 
}

<div id="downloads"> 
 
    <div class="row dl-buttons"> 
 
    <div class="col-3 col-6-sx windows"> 
 
     <a class="bt1" href="#"></a> 
 
    </div> 
 
    <div class="col-3 col-6-sx mac"> 
 
     <a class="bt1" href="#"></a> 
 
    </div> 
 
    <div class="col-3 col-6-sx android"> 
 
     <a class="bt1" href="#"></a> 
 
    </div> 
 
    <div class="col-3 col-6-sx ios"> 
 
     <a class="bt1" href="#"></a> 
 
    </div> 
 
    </div> 
 
</div>

• を削除しました使用しているコードです。

Answer 1

.dl-buttons{ 
    width: 100%; 
    text-align: center; 
} 

.dl-buttons > div { 
    width: auto; 
    display: inline-block; 
} 

Answer 2

のインラインブロックを使用する要素。フィドルhere

Answer 3

以下は小さな作業コードです。

.dl-buttons { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.dl-buttons>div { 
 
    width: auto; 
 
    display: inline-block; 
 
}

<div id="downloads"> 
 
    <div class="row dl-buttons"> 
 
    <div class="col-3 col-6-sx windows"> 
 
     <a class="bt1" href="#">s</a> 
 
    </div> 
 
    <div class="col-3 col-6-sx mac"> 
 
     <a class="bt1" href="#">a</a> 
 
    </div> 
 
    <div class="col-3 col-6-sx android"> 
 
     <a class="bt1" href="#">f</a> 
 
    </div> 
 
    <div class="col-3 col-6-sx ios"> 
 
     <a class="bt1" href="#">e</a> 
 
    </div> 
 
    </div> 
 
</div>