如何正确显示滑块
How can I display my slider correctly
大家好，我是html/css的新手。。我想在中间显示我的滑块。有人能检查一下我的代码中有什么错误吗；为什么我的Infodiv就在我想要显示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;
}
这将使滑块居中，因为它在main_content类中。
.main_content {
margin: 0 auto;
width: 100%;
clear: both;
}
一旦将图像放入滑块中，就必须将该组设置为居中，但这是通过滑块使用的任何javascript来控制的。如果只是一个图像，请使用.myImageClass{text-align: center}。
编辑：jsfiddle
相关文章：
- 日历显示不正确
- 引导程序下拉列表显示不正确
- Highcharts热图显示不正确
- 当使用javascript/jquery添加值时，html文本输入表显示不正确
- HTML 页面在通过 Chrome 扩展程序加载时显示不正确
- 绘图注释未显示在正确的位置
- CKEDITOR的内容显示不正确
- 希望在不创建新类的情况下将警告图标显示在正确的位置
- 当非整小时偏移时，带有 Moment 的时区显示不正确.js
- 为什么输入值显示不正确
- (三.js）自定义网格UV显示纹理正确
- 如何让 Mathjax.js 与 ANCII.js 将附加的 json 数据显示为正确的公式
- “查找 SharePoint 列”字段中的值显示不正确
- 来自 Ajax 请求的文本显示不正确
- asp.net 图表控件显示不正确的工具提示日期时间值
- j查询下拉菜单显示不正确
- KendoUI ComboBox 显示不正确的 REST JSON 解析
- WordPress主题在IE中显示不正确
- 图像滑块缓存后显示不正确
- 为什么我的选择标签在火狐和IE中显示不正确
