Bootstrap：居中任意跨度

Posted 2023-03-05

【中文标题】Bootstrap：居中任意跨度

【英文标题】：Bootstrap: center any span

【发布时间】：2013-04-22 17:31:28

【问题描述】：

我在使用类将span 居中时遇到问题：

.center 
    float:none;
    margin-left: auto;
    margin-right: auto;


<div class="row-fluid">
    <div class="center span5">
    <button></button>
    </div>
</div>

这不起作用，显然它被 bootstrap row-* CSS 覆盖。但是，如果我直接在 div 中包含相同的样式 (style="...")，它会起作用。

我认为它不起作用，因为它不知道宽度，所以我尝试使用偏移量，但是当按钮没有居中以及使用 .CSS 时。我无法指定宽度，因为我的 button 宽度是由外部 javascript 设置的。

在这种情况下如何使 .center 类工作？

【参考方案1】：

从 Bootstrap 2.3.0 开始，您可以使用内置类 .text-center。

<div class="row-fluid">

    <div class="span12 text-center">

    My content to be centered here

    </div>

</div>

它对我来说非常有效...... :)

【讨论】：

谢谢！这绝对是最干净的方法。

【参考方案2】：

您可以将其居中：

.center 
   margin: 0 auto !important;
   float: none !important;

JSFiddle

或者你可以使用：

.row-fluid [class*="span"].center, .center 
    margin: 0 auto;
    float: none;

我倾向于避免使用!important，因为你永远不知道它何时可能与其他一些 CSS 不同。有趣的是，上述影响在 .row 和 .row-fluid 上都不同。

【讨论】：

请不要使用!important。这是一把大锤。如果你使用它然后想要覆盖它，那么你就不能把东西加倍！重要，所以你又遇到了同样的问题……只是到处都有 !important。

同意。起初我没有注意到它是row-fluid，并在我最初的调整中尝试了row（参见unnumbered JSFiddle）。这是我的第一次调整，让它工作，然后我让它在没有它的情况下工作。

与第二个解决方案配合得很好，很好！

【参考方案3】：

使用自动边距方法时，必须为元素定义宽度。可以是任何单位，但必须定义：

.center 
    width: 50%;
    margin-left: auto;
    margin-right: auto;

:)

【讨论】：

我添加了宽度，但不知何故 span5 仍然没有居中，它的大小是正确的，当我检查元素时我看到它但它确实没有居中：/。

【参考方案4】：

.class 
    margin:auto; 
    display:table;

不知道为什么，但它总是像魅力一样发挥作用。

【参考方案5】：

我认为它不起作用，因为它不知道宽度

这不可能是真的，因为：

如果我直接在 div 中包含相同的样式 (style="...") 它可以工作

…如果它在一种情况下不知道宽度，那么在另一种情况下它也不会。

如果使用style 属性有效，那么这表明问题是一种特殊性。编写规则集的选择器，使specificity 大于覆盖这些属性的任何规则的选择器（或者使特异性相等，但规则集稍后出现在样式表中）。

您可以使用浏览器的开发者工具来查看哪些规则被应用到元素上，这样您就可以看到您必须比选择器更具体的选择器。

【讨论】：

确实，感谢您的解释！我接受了 pickypg 的回答，因为他提供了修复的代码示例。

【参考方案6】：

对于 Bootstrap 4。说家长div你可以输入这个：

class='... justify-content-center text-center m-auto'

justify-content 用于普通情况

【讨论】：

m-auto 对我来说不是必需的