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

【问题标题】：Aligning 4 DIVs to the center of a page将 4 个 DIV 对齐到页面的中心
【发布时间】：2017-05-30 18:42:05
【问题描述】：

我有一个并排有 4 个 div 的内容页面。

目前 div 一直在左边。

我尝试将 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/android/ios都一样

【问题讨论】：

How to horizontally center two divs within a header div?的可能重复

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：