Question

我正在尝试使用Bootstrap组装一个页脚。出于某种原因，尽管确保text-align: center;已应用，但页脚链接似乎略微偏离中心。有没有办法确保所有文本元素确实正确对齐？

HTML

<!DOCTYPE html>
<html>
  <body>
    <div class="container-fluid">
      <section class="row-fluid">
        <div class="span12">
          <h1 class="landing">
            Lorem Ipsum
          </h1>
          <h4 class="landing">
            Lorem Ipsum Lorem Ipsum Lorem Ipsum
          </h4>
        </div>
      </section>
    </div>
    <footer class="footer">
      <section class="row-fluid">
        <ul class="footer-links">
          <li>
            <a href="#">Contact</a>
          </li>
          <li>
            <a href="#">About</a>
          </li>
        </ul>
      </section>
    </footer>
  </body>
</html>

CSS

h1.landing {
  text-align: center;
  font-size: 400%;
}

h4.landing {
  text-align: center;
}

.footer-links {
  list-style-type: none;
  text-align: center;
}

.footer-links li {
  display: inline;
  padding-right: 10px;
}

Answer 1

您的UL似乎有一些左侧填充。尝试删除它。

.footer-links {
  list-style-type: none;
  text-align: center;
  padding:0px;
}

http://jsfiddle.net/S8mGk/1/

有没有办法确保所有文本对齐：中心文本确实居中？

1 个答案: