javascript - 我如何居中这个 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 是一个固定宽度的 block 容器，你可以用它居中

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