Как центрировать этот элемент span?

Question

У меня есть слайд-шоу с картинками на веб-сайте, где я хочу иметь определенную длину пролета, а также центрируя его. Он имеет пролет 9, но я не могу его центрировать даже с атрибутом text-align: center.

<div class="span9"> 
    <section id="slider"> 
    <div class="fullwidthbanner-container" style="text-align:center;"> 
    <div class="fullwidthbanner" style="text-align:center;"> 
    </div> 
    </div> 
    </section> 
</div> 

Вот CSS:

#slider { 
margin-top: 100px; 
text-align: center; 
} 

.fullwidthbanner-container{ 
width: 100%; 
position: relative; 
max-height: 700px; 
overflow: hidden; 
text-align: center; 
} 

.sliderbanner-container{ 
width: 100%; 
position: relative; 
max-height: 600px; 
overflow: hidden; 
text-align: center; 
} 

.fullwidthbanner ul li, 
.sliderbanner-container ul li { 
list-style: none; 
text-align: center; 
} 

Вот jsfiddle, а также: http://jsfiddle.net/uu6dch71/5/

однако, это на самом деле не появляется на предварительном просмотре. Сайт для справки является http://jmvanwyck.com

Answer 1

Поскольку .span9 представляет собой блок-контейнер с фиксированной шириной, вы можете расположить его в центре с

.span9 { 
    width: 870px; 
    margin: 0 auto; 
    float: none; /* default value */ 
}