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

时间:2016-02-17 21:19:48

标签: html css alignment

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;
}

有什么建议吗?感谢。

2 个答案:

答案 0 :(得分:4)

请检查

.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>

答案 1 :(得分:1)

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