無法在引導中心DIV 3

我無法居中很多DIV的，因爲我在我的引導程序升級爲2.1至3.0無法在引導中心DIV 3

例如，此代碼：

<div id="center" class="container"> 
    <div class="row"> 
     <div class="btn-toolbar"> 
      <div class="btn-group"> 
       <a class="btn btn-default" href="#">test</a> 
      </div> 
     </div> 

     <br /> 

     <p>Am I centered ?</p> 
     <a class="btn btn-default" href="#">Back</a> 
    </div> 

</div>

我有這個規則：

#center { 
    margin: 0 auto; 
}

但結果是： enter image description here

Ø R安置另一個例子，如何中心這樣的：

<div id="center" class="container"> 
    <div class="row"> 
     <li class="col-md-5"> 
      <ul class="list-unstyled"> 
       <li><i class="icon-user"></i> aaaaaaaaa</li> 
       <li><i class="icon-envelope"></i> bbbbbbbbbb</li> 
       <li><i class="icon-envelopebug"></i> cccccccccccc</li> 
      </ul> 
     </li> 
     <li class="col-md-5"> 
      <ul class="list-unstyled"> 
       <li><i class="icon-user"></i> aaaaaaaaa</li> 
       <li><i class="icon-envelope"></i> bbbbbbbbbb</li> 
       <li><i class="icon-envelopebug"></i> cccccccccccc</li> 
      </ul> 
     </li> 
    </div> 
</div>

enter image description here

謝謝您的幫助

來源

2013-09-26 Stéphane J.

爲了居中使用margin: 0 auto;它也必須有一個寬度比其包含塊小的塊級元素（對於auto值變得有意義） - 因爲#container被跨越其父的寬度（<body>）沒有分配的餘地。

一種alernative方法margin: 0 auto;將是通過添加text-align: center;其包含塊設置.btn-toolbar到inline-block然後定心它。您可以將同樣的理念，第二個例子：

http://fiddle.jshell.net/52VtD/94/

來源

2013-09-26 23:11:50 Adrift

謝謝它的按鈕偉大工程，但我有列表中的問題。怎麼可能有相同的結果，但沒有居中文本:) http://fiddle.jshell.net/52VtD/99/ –

在這種情況下，margin:0 auto不起作用，因爲該元素的寬度是100%。如果你想要的工作，你就必須設置元素的寬度：

.btn-toolbar { 
    width: 50px; 
    margin: 0px auto; 
}

如果要居中的文本和按鈕，你可以在類text-center添加到父元素，在這種情況下，：.row。這個類的造型只是text-align: center。

<div class="row text-center"> 
    .. 
</div>

EXAMPLE HERE

作爲@Adrift指出的那樣，這將是更有效的通過使它inline-block居中元件，因爲可以使用text-align:center而非margin:0 auto並避免必須設置一個固定的寬度元素上。這將確保元素居中，而不管其寬度如何。 (example here) - 不要忘記，您可以將父級text-center添加到父級以進行居中。

還值得注意的是，元素尊重標記中的空白，並因此生成空間（如果存在）。如果要刪除此空間，請參見this answer。

來源

2013-09-26 23:11:43

正如你建議，我也跟着@Adrift的解決方案，但感謝你的解釋;） –

無法在引導中心DIV 3

回答

相關問題