如何居中對齊div（與text-align相同：居中）？

Question

我需要將鏈接數對齊到父div的中心，但是由於這些鏈接具有包裝器，並且包裝器具有float: left ，所以我不能使用text-align: center 。 還有其他選擇嗎？

標記看起來像這樣：

<section class="parent">
  <article class="linkWrapper"><a href=".."></a></article>
  <article class="linkWrapper"><a href=".."></a></article>
  <article class="linkWrapper"><a href=".."></a></article>
</section>

為什么我需要鏈接的包裝器是有原因的，因此刪除它不是一個選擇。 任何幫助。

謝謝！

Answer 1

您可以使用margin: auto; 特技。

.parent{
   margin: 0 auto;
   width: 500px;/*define width for your wrapper*/
}

Answer 2

這是沒有道理的。 如何使包裝器向左浮動，但又想使鏈接居中？

我只能假設您想要等距的3列布局？

如果是這種情況，請將每個包裝的寬度設置為33％，然后將text-align：center放在包裝上。 這將使鏈接在包裝器內居中，所有3個元素將均勻地分布在整個外部區域。

Answer 3

為了您的標記，我像這樣居中

.parent {
  background-color: cyan;    /* Just for better understanding */
  text-align: center;
}

.parent .linkWrapper {
  background-color: red;    /* Just for better understanding */
  display: inline-block;
  padding: 5px 10px;
}

檢查鏈接http://codepen.io/TibicenasDesign/pen/yNpLaj?editors=110