使用默认的 Twitter Bootstrap CSS 水平居中对齐 div

yiyan • • 问答 • 246 阅读

Center align a div horizontally using default Twitter Bootstrap CSS

我知道如何在 CSS 中水平居中对齐 div。您需要将宽度设置为小于 100% 并在左右两侧设置自动边距。我想做这种默认样式的 Twitter Bootstrap。我不想编写额外的 CSS。想知道是否可以使用 Twitter Bootstrap 中使用的默认样式来实现。

要设置 div 的宽度，我使用的是 span*。但是 span* 是 float: left。有没有类，可以设置div的宽度，但是不会加float: left？

相关讨论

  • 您可以发布您尝试过的方法吗？或创建一个 jsfiddle 。
  • 似乎因为所有网格元素都是向左浮动的，所以如果不编写一些自定义样式，就无法将它们和它们的内容居中。也就是说，一个人不这样做怎么能建立一个网站呢？
  • 您可以通过添加类 \\'.clearfix\\' 来删除浮动

要水平对齐使用偶数跨度样式(span2、span4 等)的 div，您需要使用偏移量。

    ...

相关讨论

  • 如果要居中的内容在 span1、span3、span5、span7、span9 或 span11 中怎么办？
  • 如果它是一个奇怪的跨度并且您必须坚持使用该确切的跨度大小，那么您将需要求助于添加一些自定义 CSS。

在 div 中使用类 pagination-centered，例如：

    <p> content</p>

相关讨论

  • OP 询问的是 Bootstrap 类，而不是原始 HTML。
  • @isherwood 提醒你 .. 我没有给他 html .. 那些 CSS 属性。
  • CSS 属性实际上是 HTML。同样，OP 要求上课。
  • 哦，真的...什么标签是 text-align ，直到现在在 html 中从未见过。我写了 text-align:center (css属性)..供您参考：w3schools.com/cssref/pr_text_text-align.asp
  • "text-align" 是给定标签的样式属性的一个属性。换句话说，它是 HTML。

Bootstrap 使内容居中的方式似乎是通过将 class="center-block" 分配给它：指向 Bootstrap 3 文档页面的链接。

但是，它不适用于标题或段落。 class="text-center" 似乎在这些情况下有效。

基于@JayGee 的回答。

     ... content here ...

如果您想要水平对齐的元素是一个奇怪的跨度 (@JayGee)，并且您不想编写额外的 CSS(甚至内联？)，那么答案应该是：不，那是不可能的。否则我会去找@JayGee 的答案。

以上是使用默认的 Twitter Bootstrap CSS 水平居中对齐 div的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>