每个人我都是html / css的新手。我想在中心显示我的滑块。任何人都可以检查我的代码中有什么问题＆amp;为什么我的Info div就在那里，我想要显示我的Slider ....先谢谢。
这是HTML代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mystyle.css">
<title>GR PROVIDER</title>
</head>
<body>
<div class="Header">
<div class="heading">
<h2> Gulf Resources Provider </h2>
</div>
<div class="socialmedia">
<ul>
<li> <a href=""> <img src="GRProvider/Facebook.jpg"> </a>
</li>
<li> <a href=""> <img src="GRProvider/LinkedIn.jpg"></a>
</li>
<li> <a href=""> <img src="GRProvider/Google.jpg"> </a>
</li>
<li> <a href=""> <img src="GRProvider/Twitter.jpg"> </a>
</li>
</ul>
</div>
</div>
<div class="images">
<div class="pics">
<img src="GRProvider/Img.jpg" />
</div>
<div class="pics">
<img src="GRProvider/Img_2.jpg" />
</div>
</div>
<div class="diagram">
<div class="sample">
<img src="GRProvider/Img_3.jpg" />
</div>
<div class="sample">
<img src="GRProvider/Img_4.jpg" />
</div>
</div>
<div class="main_content">
<div class="navigation">
<ul>
<li> <a href="#"> HOME </a>
</li>
<li> <a href="#"> ABOUT US </a>
</li>
<li> <a href="#"> CAREER </a>
</li>
<li> <a href="#"> CONTACT US </a>
</li>
</ul>
</div>
<div class="Slider">
<div class="slider_img">
<img src="GRProvider/Slider.jpg">
</div>
</div>
</div>
<div class="Info">
<div class="About_Us">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting indutry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummytextoftheprintingandtypesettingindustry.LoremIpsum.............</p>
</div>
<div class="button">
<button type="button">READ MORE</button>
</div>
</div>
<div class="content">
<div class="text">
<img src="GRProvider/Img_4.jpg" />
<h4> PRODUCT INFORMATION </h4>
<p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
</div>
<div class="text">
<img src="GRProvider/Img_5.jpg" />
<h4> PRODUCT INFORMATION </h4>
<p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
</div>
<div class="text">
<img src="GRProvider/Img_6.jpg" />
<h4> PRODUCT INFORMATION </h4>
<p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
</div>
</div>
<div class="footer">
<h3> Copyright by Bitsprovider.com </h3>
</div>
</div>
</body>
</html>
这是附加的样式表。
* {
margin: 0% auto;
padding: 0;
width: 90%;
}
body {
background-color: #1e93a5;
width: 100%;
}
.header {
margin: 2%;
width: 100%;
}
.heading {
float: left;
width: 70%;
}
h2 {
color: #fff;
padding: 0 25%;
}
.socialmedia {
float: left;
width: 30%;
}
.socialmedia > img {
}
ul {
width: 100%;
}
li {
float: left;
list-style: outside none none;
text-decoration: none;
width: 11%;
}
a {
border: 1px solid #0e8393;
color: black;
float: left;
text-align: center;
text-decoration: none;
width: 100%;
}
.images {
float: left;
width: 20%;
}
.pics img {
width: 100%;
}
.diagram {
float: right;
width: 20%;
}
.sample img {
width: 100%;
}
.main_content {
float: left;
width: 60%;
}
.navigation {
width: 100%;
}
.navigation > ul {
width: 100%;
}
.navigation > ul li {
list-style: outside none none;
text-decoration: none;
width: 25%;
}
.navigation > ul li a {
background-color: #2dacbe;
color: black;
text-align: center;
text-decoration: none;
width: 100%;
}
.slider {
width: 100%;
}
.slider_img {
width: 100%;
}
.info {
float: left;
width: 100%;
}
.About_Us {
float:left;
width: 100%;
}
p {
width: 100%;
color: #FFF;
background-color: #1e93a5;
text-align:justify;
}
.button {
}
.content {
float: left;
width: 100%;
}
.text {
float: left;
width: 33%;
}
.text > img {
border: 1px solid #18204e;
width: 93%;
}
h4 {
background-color: #263270;
color: #fff;
width: 93%;
}
.text > p {
background-color: #d3d3d3;
color: #fff;
width: 93%;
}
.footer {
float: left;
padding: 2%;
width: 100%;
}
h3 {
color: #fff;
text-align: center;
}
答案 0 :(得分：1)
This will center your slider, because it's within the main_content class.
.main_content {
margin: 0 auto;
width: 100%;
clear: both;
}
Once you put the images in the slider, you will have to set that group to be centered as well, but that's controlled through whatever javascript you use for the slider. If it's just one image use .myImageClass{text-align: center}.
edit: jsfiddle