如何正确显示我的滑块

Question

everyone i'm new to html/css..I want to display my slider in the center. 大家，我是html / css的新手。我想在中央显示我的滑块。 Can anyone check what wrong in my code & why my Info div come right there where I want display my Slider....Thanks in advance. 谁能检查我的代码中有什么错误以及为什么我的Info div会在那里显示我的Slider。...谢谢。

Here is HTML Code: 这是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>

Here is stylesheet attached. 这是样式表。

* {
    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;
}

Answer 1

This will center your slider, because it's within the main_content class. 这将使滑块居中，因为它位于main_content类中。

.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. 将图像放入滑块后，您还必须将组设置为居中，但这可以通过滑块使用的任何JavaScript进行控制。 If it's just one image use .myImageClass{text-align: center} . 如果只是一张图片，请使用.myImageClass{text-align: center} 。

edit: jsfiddle 编辑： jsfiddle

如何正确显示我的滑块

问题描述

1 个解决方案

解决方案1
1 2015-11-12 10:38:23

如何正确显示我的滑块

问题描述

1 个解决方案

解决方案1 1 2015-11-12 10:38:23

解决方案1
1 2015-11-12 10:38:23