我正在自学网页设计，并且正在 Dreamweaver 中构建一个随机站点以供娱乐。我正在尝试将图像滚动的容器居中，以根据屏幕大小自动调整到中心(所以左侧和右侧可以是偶数)。我不知道该怎么做。另外，图像之间有一些滞后，可以看到容器的黄色背景这正常吗？有没有办法让我的 (UL) 占据网站的顶部，使顶部为白色，然后底部为黑色，我如何居中对齐我的导航栏？
这就是我必须要做的......
好的，这里是代码的链接，唯一的问题是我不确定为什么 jquery 代码没有运行图像应该自动滚动或通过单击橙色框(“箭头”)滚动。 http://codepen.io/anon/pen/jPXEWd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="Head">
<div class="Nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">GALLERY</a></li>
</ul>
</div>
<style>
body{
background:black;
}
.Nav{
background-color:white;
height:40px;
}
.Nav ul{
color:white;
font-family:"American Typewriter";
padding:0px;
}
.Nav ul li{
list-style:none;
margin-left:350px;
}
.Nav ul li a{
text-decoration:none;
float:left;
padding: 10px 40px;
color:black;
}
.Nav ul li a:hover{
color:orange;
}
</style>
<script src="../Downloads/jquery-1.11.3.min.js"></script>
<script src="../Downloads/jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'slow',
next: '#next',
prev: '#prev '
});
</script>
<!--This is where the slider is happening-->
<style type="text/css">
#wrapper{
display:block;
height:500px;
width:500px;
}
#container{
background-color:#FFC;
display:block;
float:left;
height:500px;
width:1200px;
overflow:auto;
margin-left:25%;
margin-top:50px;
}
#prev{
background-image:url(../Downloads/1438243795_circle_back_arrow.png);
background-repeat:no-repeat;
background-position:center center;
display:block;
float:left;
height:500px;
width:200px;
position:relative;
z-index:99;
}
#next{
background- image:url(../Downloads/1438243790_circle_next_arrow_disclosure.png);
background-repeat:no-repeat;
background-position:center center;
display:block;
float:right;
height:500px;
width:200px;
position:relative;
z-index:99;
}
#slider{
display:block;
float:left;
height:500px;
width:1200px;
overflow:hidden;
position:absolute;
}
</style>
<div id= "wrapper">
<div id = "container">
<div class="controller" id="prev" ></div>
<div id="slider">
<img src="../Pictures/1910493.jpg" width="1920" height="1080" />
<img src="../Pictures/1822211.jpg" width="2560" height="1600" />
<img src="../Pictures/old_book_4-wallpaper-1920x1440.jpg" width="1920" height="1440" /> </div>
<div class="controller" id="next" ></div>
</div>
</div>
<div id = "background">
</div>
</body>
</html>
最佳答案
有很多关于如何在其容器内水平居中 div 的信息，因此我将只解释为什么您的 slider 不居中。您可以阅读这些问答以获取更多信息:Horizontally center a div in a div或 How do you easily horizontally center a using CSS? .
您要做的第一件事是从#container 中删除float 属性，因为它直接说明了要采取的位置。然后，将 margin left 和 right 设置为 auto。最后，将#wrapper的with改为100%，即去掉'500px'。
新的 CSS 代码是:
#wrapper {
display: block;
height: 500px;
}
#container {
background-color: #FFC;
display: block;
height: 500px;
width: 1200px;
overflow: auto;
margin: 50px auto 0 auto;
}
工作演示:http://codepen.io/anon/pen/xGmbqE
PD:为了使您的演示正常运行，您必须在设置部分(JavaScript 选项卡)配置所需的外部 JavaScript 库。
关于javascript - 中心导航栏和 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31738109/