Wie man Elemente in einem Element zentriert

Question

Ich habe mich gefragt, wie man 3 divs innerhalb eines div zentriert.

Hier ist mein Codebeispiel

body { 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#container { 
 
    border: 3px solid black; 
 
    height: 90%; 
 
    width: 90%; 
 
} 
 
.plaatje { 
 
    width: 30%; 
 
    height: 70%; 
 
    border: 2px solid black; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
#plaatje1 { 
 
    background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
#plaatje2 { 
 
    background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
#plaatje3 { 
 
    background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
}

<div id="container"> 
 
    <div id="plaatje1" class="plaatje"> 
 
    </div> 
 

 
    <div id="plaatje2" class="plaatje"> 
 

 
    </div> 
 
    <div id="plaatje3" class="plaatje"> 
 

 
    </div> 
 
</div>

Das Problem ist, gibt es noch auf der rechten Seite des Bild ein weißer Raum ist, habe ich es markiert, so wissen Sie, was Ich rede von.

Es muss auch skalieren, so dass, wenn ich die Größe des Fensters, dass das dritte Bild nicht Pops unter dem ersten oder dass der Raum vorhanden ist, wenn ich es vollständig ändern.

Jede Hilfe wird geschätzt.

Answer 1

ich geschaffen habe ein jsFiddle, die zeigt, wie Sie dies mit Flexbox tun können. Es erfordert kein Floating der Elemente und gibt Ihnen genau das, wonach Sie suchen.

Ich habe einen Wrapper um die Bilder (.images) hinzugefügt und ihm die Flex-Eigenschaften gegeben, die erforderlich sind, um seinen Inhalt auszurichten, dann entfernte die Floats und ein paar andere unnötige Dinge. Hier

ist die Browser-Unterstützung für Flexbox: caniuse:flexbox

body { 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#container { 
 
    border: 3px solid black; 
 
    height: 90%; 
 
    width: 90%; 
 
} 
 
.images { 
 
    height: 90%; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.plaatje { 
 
    width: 30%; 
 
    height: 70%; 
 
    border: 2px solid black; 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
#plaatje1 { 
 
    background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png"); 
 
} 
 
#plaatje2 { 
 
    background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png"); 
 
} 
 
#plaatje3 { 
 
    background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png"); 
 
}

<div id="container"> 
 
    <div class="images"> 
 
     <div id="plaatje1" class="plaatje"></div> 
 
     <div id="plaatje2" class="plaatje"></div> 
 
     <div id="plaatje3" class="plaatje"></div> 
 
    </div> 
 
</div>

Answer 2

Sie könnten einfach nur versuchen text-align:center; zu Ihrem Container div Hinzufügen

Answer 3

Es gibt viele Möglichkeiten, dies zu tun, und Sie sollten wahrscheinlich mit beginnen - für SO diese Grundstufe Frage wird häufig gekennzeichnet als nicht angemessen.

Aber! Herzlich willkommen. Hier ist eine Möglichkeit, wie Sie das tun können - ich habe Kommentare hinzugefügt, um zu erklären, was vor sich geht. Grundsätzlich per Definition gemacht .plaatje s unmöglich zu zentrieren; und die text-align: center Bedürfnisse auf dem enthaltenden Element sein

body { 
 
    position: fixed; /* probably don't actually want */ 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; /* add */ 
 
} 
 
#container { 
 
    border: 3px solid black; 
 
    height: 90%; 
 
    width: 90%; 
 
    margin-left: 5%; 
 
    text-align: center; /* add */ 
 
} 
 
.plaatje { 
 
    width: 30%; 
 
    height: 70%; 
 
    border: 2px solid black; 
 
    /* float: left;  // remove 
 
    text-align: center;*/ 
 
    display: inline-block; /* add */ 
 
} 
 
#plaatje1 { 
 
    background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
#plaatje2 { 
 
    background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
#plaatje3 { 
 
    background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
}

<div id="container"> 
 
    <div id="plaatje1" class="plaatje"> 
 
    </div><div id="plaatje2" class="plaatje"> 
 

 
    </div><div id="plaatje3" class="plaatje"> 
 

 
    </div> 
 
</div> 
 

 
<!-- removed spaces between the divs -->