完美中心与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水平对齐

回答

相关问题