我在网站上有一张图片幻灯片,我希望它具有一定的跨度长度,同时也将其居中。它的跨度为 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
最佳答案
因为 .span9
是一个固定宽度的 block 容器,你可以用它居中
.span9 {
width: 870px;
margin: 0 auto;
float: none; /* default value */
}
关于javascript - 我如何居中这个 span 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27913092/