Question

我正在自学网页设计，我正在Dreamweaver中建立一个随意的网站。我正试图将图像滚动的容器居中，根据屏幕大小自动调整到中心（所以左右两侧可以均匀）。我不知道该怎么做。此外，图像之间有一些小的滞后，可以看到容器的黄色背景是正常的？有没有办法让我（UL）占据网站的顶部，所以顶部是白色，然后是底部黑色，我如何居中对齐我的导航栏？

这就是我所要做的......

好的，这里只是链接到代码的事情是我不确定为什么jquery代码没有运行图像是假设自动滚动或点击橙色框（“箭头”）。http://codepen.io/anon/pen/jPXEWd < / p>

   <!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>

Answer 1

有很多关于如何在其容器内水平居中div的信息，因此我只能解释滑块未居中的原因。您可以阅读这些问答，以获取更多信息：Horizontally center a div in a div或How do you easily horizontally center a using CSS?。

您要做的第一件事就是从float移除#container属性，因为它直接说明要采取的位置。然后，将左边距和右边距设置为auto。最后，将#wrapper的内容更改为100％，即删除＆＃39; 500px＆＃39;。

新的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库。

中心导航栏和滑块

1 个答案: