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

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，但关键是具有确定的宽度和自动左右边距。

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

Centering text in footer without text-align center

html

css

alignment