我在页面中添加了一个jQuery响应滑块,而不是在页面中居,滑块移动到页面右侧。我尝试了CSS中的所有内容以使其居中,但我不能。我找不到我在这里做错了什么,有人可以指出错误吗?
这是我的代码
<div class="banner">
<div class="slider">
<ul>
<li> <a href="#"> <img src="graphics/top.jpg" width="990" height="520"> </a> </li>
<li> <a href="#"> <img src="graphics/top.jpg" width="990" height="520"> </a> </li>
</ul>
<div class="dots">
<a href="javascript:void(0);" rel="0" class="cur"></a>
<a href="javascript:void(0);" rel="1"></a>
<a href="javascript:void(0);" rel="2"></a>
<a href="javascript:void(0);" rel="3"></a>
</div>
<div class="arrow">
<a href="javascript:void(0);" class="btn-left"><</a>
<a href="javascript:void(0);" class="btn-right">></a>
</div>
</div>
</div>
CSS
.banner { margin-bottom: 20px; z-index: 1; }
.banner .slider { position: relative; width: 990px; }
.banner .slider ul { margin: 0; padding: 0; list-style: none; width: 100%; height: 520px; position: relative;}
.banner .slider ul li { position: absolute; top: 0; left: 50%; }
.banner .slider .dots:after { display: table; clear: both; content: ""; }
.banner .slider .dots { position: absolute; bottom: 20px; left: 60%; z-index: 40; *zoom: 1; }
.banner .slider .dots a { display: block; float: left; width: 12px; height: 12px; margin-right: 10px; text-indent: -9999em; background: #000; border-radius: 10px; }
.banner .slider .dots .cur { background: #329; }
.banner .slider .arrow { width: 65%; position: absolute; top: 45%; left: 18%; z-index: 50; }
.banner .slider .arrow a { font-family: "Microsoft YaHei"; font-size: 34px; font-weight: 700; color: #fff; }
.banner .slider .arrow .btn-left { float: left; }
.banner .slider .arrow .btn-right { float: right; }
答案 0 :(得分:1)
您需要添加.banner { position: absolute; margin-left:-495px; left:50%; width: 990px;}
并删除.banner .slider ul li { left: 50%; }
那应该以它为中心。