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;を使用してコンテナ内の中央に揃うようにするにはそれ自体は、コンテナーよりも小さい幅と高さを持つ必要があります。だからそれを中心にする。ただ.sliderクラスでbackground-size:contain;を追加した画像が応答するために今すぐmax-width:350px;

のようにピクセル単位の幅を持つように.sliderクラスのmax-width:100%を変更します。ここで

は、あなたが望むように動作します.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要素の水平方向の整列

答えて

関連する問題