Центральный неупорядоченный список в контейнере

Question

Я использую bootstrap v3 &, пытаясь выровнять неупорядоченный список в центре контейнера. По какой-то причине он не по центру правильно

Вот HTML

<!-- Page Content --> 
    <div class="container" style="border: 1px solid red"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <ul id="tabs"> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       </ul> 
      </div> 
     </div> 
     <!-- /.row --> 
    </div> 
    <!-- /.container --> 

и CSS

ul#tabs { 
    display: block; 
    margin: 0 auto; 
} 

ul#tabs li{ 
    float: left; 
    border: 1px solid red; 
    width: 180px; 
    height: 80px; 
    padding:0; 
    margin:0; 
} 

Что я делаю неправильно?

Answer 1

margin: 0 auto; не будет центрировать элемент без указанной ширины, потому что display:block заставляет элемент занимать все доступное горизонтальное пространство.

Поскольку ваши li s фиксированной ширины, вы можете попробовать:

ul#tabs { 
    display: block; 
    text-align:center; 
} 

ul#tabs li{ 
    display:inline-block; 
    border: 1px solid red; 
    width: 180px; 
    height: 80px; 
    padding:0; 
    margin:0; 
} 

http://jsfiddle.net/01fLnf28/

Имейте в виду, что ul все еще столь же широко, как его родитель, поэтому он не может быть лучшим решением, если вам нужен фон на ul, который охватывает только область комбинированных li s.