Wie zentriere ich diese zwei divs mit dem Container, der inline-block angezeigt wird?

Question

Ich habe Probleme mit der Zentrierung dieser zwei schwebenden linken Divs in einen Container mit einer Höhe von Auto und einem Display, das auf inline-block eingestellt ist. Ich habe meinem Container eine maximale Breite von 1600px gegeben und wenn das Fenster breiter als 1600px gestreckt wird, bleibt der Container nach links fixiert. Ich habe versucht, Text align:center, und margin:0 auto, auf dem Container, aber ich bekomme nicht das Ergebnis, das ich suche.

Hier ist mein Code.

.keyfacts { 
 
\t width: 94%; 
 
\t height: auto; 
 
\t max-width: 1600px; 
 
\t padding: 60px 3% 60px 3%; 
 
\t background-color: #634A4B; 
 
\t display: inline-block; 
 
} 
 

 
.keyfactsleft { 
 
\t float: left; 
 
\t width: 47%; 
 
\t height: auto; 
 
\t padding-right: 3%; 
 
} 
 

 
.keyfactsleft p { 
 
\t font-family: 'Raleway', san-serif; 
 
\t font-size: 24px; 
 
\t line-height: 32px; 
 
\t font-weight: 100; 
 
    color: #58595b; 
 
    margin-bottom: 35px; 
 
} 
 

 
.keyfactsright { 
 
    float: left; 
 
    width: 50%; 
 
    height: 465px; 
 
    background-image: url(_images/meredith-manor-aerial.jpg); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-color: #A05B5C; 
 
}

<section class="keyfacts"> 
 
\t <div class="keyfactsleft"> 
 
    \t <h3 class="red">When</h3> 
 
     <p>Saturday, October 14, 2017 at Five in the Evening</p> 
 
     <h3 class="red">Where</h3> 
 
     <p>Meredith Manor<br>2270 Pottstown Pike, Pottstown, PA 19465</p> 
 
     <p>Our convenient venue will host both our ceremony and our reception. Its location is only a few miles down the road from the Hilton Garden Inn, where you’ll be sleeping if you plan on getting wild and staying over.</p> 
 
    </div> 
 
    <div class="keyfactsright"></div> 
 
</section>

Answer 1

sehen diese Arbeitsprobe: setzen müssen Höhe auf div-Container https://jsfiddle.net/s8rL8e8v/ wenn Ihr Inhalt eine Höhe hat, Sie nicht. Setzen Sie einfach overflow:hidden und es wird den gesamten Inhalt darin bewältigen und einige padding setzen.

.keyfacts { 
     width: 94%; 
    max-width: 1600px; 
    margin: 0 auto; 
    overflow: hidden; 
    padding: 60px 3% 60px 3%; 
    background: #634A4B 
} 

.keyfactsleft { 
    float: left; 
    width: 47%; 
    height: auto; 
    padding-right: 3%; 
} 

.keyfactsleft p { 
    font-family: 'Raleway', san-serif; 
    font-size: 24px; 
    line-height: 32px; 
    font-weight: 100; 
    color: #58595b; 
    margin-bottom: 35px; 
} 

.keyfactsright { 
    float: left; 
    width: 50%; 
    height: 465px; 
    background-image: url(_images/meredith-manor-aerial.jpg); 
    background-size: cover; 
    background-position: center center; 
    background-color: #A05B5C; 
} 

Answer 2

Wenn Sie die übergeordneten Container zentriert werden wollen, dann div.keyfacts muss ein Block-Level-Element sein, beispielsweise display: block oder display: table. In den beiden Fällen wird margin: 0 auto den Container zentrieren.

Da Sie die Breite für div.keyfacts angeben, wird jede der beiden Optionen funktionieren.

(I angepasst, um die width und max-width Werte für die Demonstration nur.)

.keyfacts { 
 
    width: 70%; 
 
    height: auto; 
 
    max-width: 450px; 
 
    padding: 60px 3% 60px 3%; 
 
    background-color: #634A4B; 
 
    display: table; 
 
    margin: 0 auto; 
 
} 
 
.keyfactsleft { 
 
    float: left; 
 
    width: 47%; 
 
    height: auto; 
 
    padding-right: 3%; 
 
} 
 
.keyfactsleft p { 
 
    font-family: 'Raleway', san-serif; 
 
    font-size: 24px; 
 
    line-height: 32px; 
 
    font-weight: 100; 
 
    color: #58595b; 
 
    margin-bottom: 35px; 
 
} 
 
.keyfactsright { 
 
    float: left; 
 
    width: 50%; 
 
    height: 465px; 
 
    background-image: url(_images/meredith-manor-aerial.jpg); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-color: #A05B5C; 
 
}

<section class="keyfacts"> 
 

 
    <div class="keyfactsleft"> 
 

 
    <h3 class="red">When</h3> 
 

 
    <p>Saturday, October 14, 2017 at Five in the Evening</p> 
 

 
    <h3 class="red">Where</h3> 
 

 
    <p>Meredith Manor 
 
     <br>2270 Pottstown Pike, Pottstown, PA 19465</p> 
 

 
    <p>Our convenient venue will host both our ceremony and our reception. Its location is only a few miles down the road from the Hilton Garden Inn, where you’ll be sleeping if you plan on getting wild and staying over.</p> 
 

 
    </div> 
 

 
    <div class="keyfactsright"></div> 
 

 
</section>

Answer 3

Sie können entweder tun:

body { text-align: center } die .keyfacts zum Zentrum, aber dies wird von Ihnen verlangen zu tun .keyfacts { text-align: left }

Ich würde stattdessen mit .keyfacts { display: block, margin: 0 auto } gehen.

Wenn ein Element display: inline-block ist, benötigt das übergeordnete Element text-align: center, um das Element zu zentrieren. Dies betrifft jedoch alle untergeordneten Elemente innerhalb des Containers.

Wenn ein Element display: block ist, dann wird durch Anwenden von margin: 0 auto auf das Element selbst (NOT THE PARENT) das Element zentriert.