引導：中心的任何跨度

我使用一個類居中時有一個問題我span：引導：中心的任何跨度

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

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

這是不行的，顯然它是由自舉行向* CSS覆蓋。但是，如果我直接在div中包含相同的樣式（style="..."），它將起作用。

我認爲它不工作，因爲它不知道寬度，所以我嘗試使用偏移量，但是當按鈕不居中以及與.CSS。由於我的button寬度由外部JavaScript設置，因此我無法指定寬度。

如何讓.center類在這種情況下工作？

來源

2013-04-29 Aki

從Bootstrap 2.3.0開始，您可以使用內置類.text-center。

<div class="row-fluid"> 

    <div class="span12 text-center"> 

    My content to be centered here 

    </div> 

</div>

它的工作完美的我... :)

來源

2013-07-02 22:51:58

謝謝！這絕對是最乾淨的方法。 – Nebri 2015-02-25 15:29:22

使用自動邊距方法時，必須定義元素的寬度。它可以是任何單位，但它必須定義：

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

來源

2013-04-29 06:00:41 Kyle

我增加了寬度，但不知何故span5仍然不集中，它的大小是正確的，當我檢查我看到它的元素，但它確實不集中：/。 – Aki 2013-04-29 06:12:04

你可以居中：

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

JSFiddle

或者你可以使用：

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

我傾向於避免!important，因爲你永遠不知道它何時會與其他一些CSS不同。有趣的是，上面的影響在流動和流動方面都有所不同。

來源

2013-04-29 06:06:17 pickypg

請不要使用'！important'。這是一把大錘。如果你使用它，然後想重寫它，那麼你就不能做出一些重要的事情，所以你再也遇到同樣的問題......只要！ – Quentin 2013-04-29 06:09:28

同意。我沒有注意到它一開始是'row-fluid'，並且在我最初的調整中嘗試了'row'（參見[無編號的JSFiddle]（http://jsfiddle.net/WesWz/））。這是我的第一個調整工作，然後我沒有它的工作。 – pickypg 2013-04-29 06:12:41

第二種解決方案很好，非常好！ – Aki 2013-04-29 06:15:17

我認爲這是行不通的，因爲它不知道寬度

，因爲這不可能是真的：

如果我包括在div相同的風格直接（style =「...」）它的工作原理

...如果在一種情況下它不知道寬度，那麼它就不會在另一種情況下。

如果使用style屬性起作用，那麼這是一個跡象表明問題是特異性問題之一。編寫規則集的選擇器，以便specificity大於任何規則覆蓋這些屬性的規則（或者使特性相同，但規則集稍後出現在樣式表中）。

您可以使用瀏覽器的開發工具來查看哪些規則正在應用到元素，以便您可以看到選擇器必須比特定的更具體。

來源

2013-04-29 06:08:43 Quentin

確實，感謝您的解釋！自從他提供修補程序的代碼示例以來，我接受了pickypg的回答。 – Aki 2013-04-29 06:16:27

.class { 
    margin:auto; 
    display:table; 
}

IDK爲什麼，但它始終就像一個魅力。

來源

2016-08-20 22:09:23 Wang

引導：中心的任何跨度

回答

相關問題