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

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>