将4个DIV对齐到一个页面的中心

目前divs粘在左边。

我试图将div的容器和文本对齐，但它不起作用。

这里是我使用，我删除一些图像的URL等

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

所有其他类/ MAC /安卓/ iOS设备都是一样的

代码

来源

2017-05-30 DaveYme

的可能的复制[如何水平的报头内的div中心两个div？]（https://stackoverflow.com/questions/11582226/how-to-horizontally-center-two -divs-within-a-header-div） – Rob

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

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

来源

2017-05-30 10:38:21

谢谢。这工作完美。 – DaveYme

使用内联块为col-3元素。小提琴here

来源

2017-05-30 10:40:20 Gerard

以下是适合您的小型工作代码。

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

来源

2017-05-30 10:42:05

将4个DIV对齐到一个页面的中心

回答

相关问题