Horizontale Ausrichtung eines div Elements

Ich versuche, das div Element mit .slider Klasse horizontal auszurichten, aber die Anwendung margin: 0 auto; funktioniert nicht. Bitte auch, wie man das Slider Image anspricht?Horizontale Ausrichtung eines div Elements

/* 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>

Quelle

2016-11-08 user3654045

Ausgabe hier ist der Schieber div max Breite seines Behälters nimmt. Damit ein div den Mittelpunkt innerhalb eines Containers unter Verwendung von margin:0 auto; ausrichtet. es sollte eine begrenzte Breite und Höhe haben, die kleiner als sein Behälter ist. Also um es zu zentrieren. Ändern Sie den max-width:100% in der .slider Klasse eine Breite in Pixel zu haben, wie max-width:350px;

Jetzt machen das Bild reagiert, nur die background-size:contain; in der .slider Klasse hinzuzufügen. Hier

ist die .slider Klasse, die arbeiten, wie Sie wollen:

.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; 
}

Quelle

2016-11-08 13:21:40

Horizontale Ausrichtung eines div Elements

Antwort

Verwandte Themen