css - 有没有办法确保所有文本对齐 : center text is indeed centered?

标签 css twitter-bootstrap

我正在尝试使用 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;
}

最佳答案

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

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

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

关于css - 有没有办法确保所有文本对齐 : center text is indeed centered?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16072305/

相关文章:

jquery - 没有父 div 的 CSS Jquery 输入文本

html css float 不环绕图像顶部,

javascript - 显示/隐藏隐藏的 div 并更改 css

html - CSS Grid 中灵活的网格行高

php - SQL 插入 Bootstrap 表单

javascript - Bootstrap 类 ='page-scroll' 不起作用

css - 如何在样式指南中以 DRYly 方式呈现代码片段

css - 如何通过 Asp.net 捆绑在打印页面上使用 Bootstrap 样式

javascript - React调用 Bootstrap 函数?

html - 使用 Bootstrap 根据屏幕大小显示固定数量的行元素