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

如何居中对齐div（与text-align：center相同）？

3 个答案: