Question

从this JSFiddle，您可以看到我有一个页脚。

我想在每列中对齐内容，以便容器居中，但文本仍然左对齐。

HTML：

<div class="left">
  <div class="align">
    <h6>Facebook</h6>
    <h6>Twitter</h6>
    <h6>Blog</h6>
  </div>
</div>
<div class="right">
  <div class="align">
    <h6>Privacy Policy</h6>
    <h6>Terms of Service</h6>
    <h6>Help</h6>
    <h6>Contact Us</h6>
  </div>
</div>

CSS：

div {
  width: 50%;
}

.left {
   float: left;
}

.right {
  float: right;
}

.align {
  display: table;
  margin: 0 auto;
}

有什么建议吗？感谢。

Answer 1

请检查

.left {
  width: 50%;
  float: left;
  background-color: white;
}
.right {
  width: 50%;
  float: right;
  background-color: black;
  color: white;
}
.hor-center {
  display: table;
  margin: 0 auto;
}

<div class="left">
  <div class="hor-center">
    <h6>Facebook</h6>
    <h6>Reddit</h6>
    <h6>Instagram</h6>
  </div>
</div>
<div class="right">
  <div class="hor-center">
    <h6>Terms</h6>
    <h6>F&amp;Q</h6>
    <h6>Email</h6>
  </div>
</div>

Answer 2

您需要在块级容器上设置宽度并为其指定margin: 0 auto;。您可以更改0，它控制顶部和底部边距，但是键具有明确的宽度，具有自动左右边距。

在没有文本对齐中心的页脚中居文本

2 个答案: