Question

我有一页内容与4 div并排。

目前div正在向左侧移动。

我试图将div包装在一个容器中并将文本对齐该中心，但它不起作用。

这里是我正在使用的代码我删除了一些图片网址等

#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都是相同的

Answer 1

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

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

Answer 2

对col-3元素使用内联块。小提琴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>

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

3 个答案: