div元素的水平對齊

我試圖水平對齊div元素與.slider類，但應用margin: 0 auto;不起作用。還請，如何使滑塊圖像響應？這裏div元素的水平對齊

/* CSS Document */ 
 

 
.header { 
 
    background-image: URL("images/header_top.png"); 
 
    height: 80px; 
 
} 
 
.logo { 
 
    float: left; 
 
    background-image: URL("images/header_logo.png"); 
 
    color: white; 
 
    background-repeat: no-repeat; 
 
    height: 84px; 
 
    width: 264px; 
 
} 
 
body { 
 
    margin: 0px 0px 0px 0px; 
 
    background-image: URL("images/bg_blueprint.jpg"); 
 
    width: 100%; 
 
} 
 
.container-main { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.slider { 
 
    background-image: URL("images/slider_photo.png"); 
 
    background-repeat: no-repeat; 
 
    margin: 0 auto; 
 
    float: none; 
 
    height: 482px; 
 
    max-width: 100%; 
 
}

<body> 
 
    <div class="container-main"> 
 

 
    <div class="pure-u-1 pure-u-md-1 header"> 
 
     <div class="logo"></div> 
 
    </div> 
 

 
    <div class="slider"></div> 
 

 
    </div> 
 
</body>

來源

2016-11-08 user3654045

問題是滑塊的div正在其容器的最大寬度。爲了讓div在容器內使用margin:0 auto;對齊中心。它本身的寬度和高度應該比容器小。所以要使它成爲中心。更改max-width:100%在.slider類有像max-width:350px;

在像素的寬度現在使圖像響應剛纔添加的background-size:contain;在.slider類。

這裏是.slider類，將工作，只要你想：

.slider{ 
background-image: URL("http://placehold.it/350x150"); 
background-repeat: no-repeat; 
background-size:contain; 
margin: 0 auto; 
float: none; 
height: 482px; 
max-width: 350px; 
}

來源

2016-11-08 13:21:40

div元素的水平對齊

回答

相關問題