Question

我已经创建了css3图像幻灯片，它的工作完美，但幻灯片的位置绝对不正确。

以下是html中的代码：

<div id = "header">
<div class = "wrap">
<div class = "logo">
<img src = "img/photo.jpg" alt = "" /> 
</div>
<div class = "navigation">
<ul>
<li><a href = "#">HOME</a></li>
<li><a href = "#">ABOUT</a> </li>
<li><a href = "#">HISTORY</a> </li>
<li><a href = "#">NEWS</a> </li>
<li><a href = "#">CONTACT</a> </li>
<li><a href = "#">CONTACT</a> </li>
<li><a href = "#">CONTACT</a> </li>
</ul>
</div>
</div>
</div>
<div class = "wrap">
<div class="slides">
<ul>
<li><img src="slide-1.jpg"  alt="" /></li>
<li><img src="slide-2.jpg" alt="" /></li>
<li><img src="slide-3.jpg" alt="" /></li>
<li><img src="slide-4.jpg" alt="" /></li>
</ul>
</div>
</div> 
<div class = "wrap">
<p>Saina Nehwal (About this sound pronunciation  (help.info); born 17 .../p>
</div>

这是我工作的jsfiddle：http://jsfiddle.net/qj6s0xdh/

有人可以帮我调整幻灯片的位置吗？

提前致谢。

Answer 1

Here滑块现在居中对齐，只需将以下内容添加到滑块的ul

width: 60%; 
margin: auto; 
display: block;

Answer 2

这是你想要的吗？

http://jsfiddle.net/qj6s0xdh/2/

我不认为float: left;中的#header是你想要的。

Answer 3

添加以下属性：

.slides ul li {
  width:100%;
}
.slides ul li image {
  margin:0 auto;
}

发布css3幻灯片工作位置

3 个答案: