完美中心與Bootstrap水平對齊

當涉及到使用Bootstap水平居中對齊時，我可以選擇一些選項。完美中心與Bootstrap水平對齊

我可以使用offset類或使用空白span類作爲佔位符。另外一個選項可以使用自定義排列像這些選項下面

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

沒有解決我的問題，因爲在div容器的內容具有100％，填補了寬度。

比方說，我有以下

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4 offset4"> 
     <button class="btn">1-1</button> 
     <button class="btn">1-2</button> 
     </div> 
    </div> 
</div>

如果按鈕不填充的span4全格空間，我不會得到真正的中心對齊。也許，我可以將內容延伸至100％，但我不知道這是否是一種好的做法。

在這裏我有一個畫布可以玩。 JS BIN

來源

2013-09-24 Seong Lee

添加你的'.center'類應該可以工作。將該類添加到按鈕時會發生什麼？ –

它不這樣做..感謝您的興趣 –

此問題已過時3.x和4.x請參閱：http://stackoverflow.com/a/42483682/171456 – ZimSystem

既然你有行內元素，你可以只使用上跨度.text-center類，也your're可能會更好過使用偏移比空元素：

HTML

<div class="row-fluid"> 
    <div class="span4 offset4 text-center"> 
    <button class="btn">1-1</button> 
    <button class="btn">1-2</button> 
    </div> 
</div>

更新演示：http://jsbin.com/ayuFEhO/2/edit

來源

2013-09-25 00:02:53

你不需要添加一個新的類，如果你想水平對齊這個按鈕，只需使用.text-center這裏是一個垃圾箱http://jsbin.com/UVeGejO/1/edit

Obs：text-center class已經存在於twitter的引導代碼中。

來源

2013-09-25 00:04:02

完美中心與Bootstrap水平對齊

回答

相關問題