我如何居中这个 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 */
}

我如何居中这个 span 元素？

How do I center this span element?

html

javascript

css

jquery

twitter-bootstrap