如何正確顯示我的滑塊

Question

大家，我是html / css的新手。我想在中央顯示我的滑塊。 誰能檢查我的代碼中有什么錯誤以及為什么我的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;
}

Answer 1

這將使滑塊居中，因為它位於main_content類中。

.main_content {
    margin: 0 auto;
    width: 100%;
    clear: both;
}

將圖像放入滑塊后，您還必須將組設置為居中，但這可以通過滑塊使用的任何JavaScript進行控制。 如果只是一張圖片，請使用.myImageClass{text-align: center} 。

編輯： 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