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元素居中？

1 个答案: