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元素的水平对齐

回答

相关问题