Hier ist eine Technik zum gleichzeitigen horizontalen und vertikalen Ausrichten von Inline-Elementen innerhalb eines übergeordneten Elements :
Vertikale Ausrichtung
1) Bei diesem Ansatz erstellen wir ein inline-block(Pseudo-) Element als erstes (oder letztes) Kind des Elternteils und setzen seine heightEigenschaft so, dass 100%es die gesamte Höhe seines Elternteils annimmt .
2) Beim Hinzufügen vertical-align: middlebleiben die Inline-Elemente (-block) in der Mitte des Zeilenbereichs. Also fügen wir diese CSS-Deklaration sowohl dem ersten Kind als auch unserem Element (dem Bild ) hinzu.
3) Um das Leerzeichen zwischen Inline- Elementen (-block) zu entfernen , können Sie die Schriftgröße des übergeordneten Elements auf Null setzen font-size: 0;.
Hinweis: Ich habe im Folgenden die Bildersetzungstechnik von Nicolas Gallagher verwendet .
Was sind die Vorteile?
- Der Container ( übergeordnet ) kann dynamische Dimensionen haben.
Die Abmessungen des Bildelements müssen nicht explizit angegeben werden.
Mit diesem Ansatz können wir ein <div>Element auch vertikal ausrichten . die einen dynamischen Inhalt haben können (Höhe und / oder Breite). Beachten Sie jedoch, dass Sie die font-sizeEigenschaft von neu festlegen müssen div, um den Innentext anzuzeigen. Online-Demo .
<div class="container">
<div id="element"> ... </div>
</div>
.container {
height: 300px;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.container:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
#element {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}
Die Ausgabe
Responsive Container
In diesem Abschnitt wird die Frage nicht beantwortet, da das OP bereits weiß, wie ein reaktionsfähiger Container erstellt wird. Ich werde jedoch erklären, wie es funktioniert.
Um die Höhe eines Containerelements mit seiner Breite zu ändern (unter Berücksichtigung des Seitenverhältnisses), können wir einen Prozentwert für die paddingEigenschaft top / bottom verwenden .
Ein Prozentwert für die obere / untere Polsterung oder die Ränder ist relativ zur Breite des enthaltenen Blocks.
Zum Beispiel:
.responsive-container {
width: 60%;
padding-top: 60%; /* 1:1 Height is the same as the width */
padding-top: 100%; /* width:height = 60:100 or 3:5 */
padding-top: 45%; /* = 60% * 3/4 , width:height = 4:3 */
padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9 */
}
Hier ist die Online-Demo . Kommentieren Sie die Linien von unten aus und ändern Sie die Größe des Bedienfelds, um den Effekt zu sehen.
Wir könnten die paddingEigenschaft auch auf ein Dummy- Kind oder :before/ :afterPseudo-Element anwenden , um das gleiche Ergebnis zu erzielen. Aber zur Kenntnis , dass in diesem Fall auf den Prozentwert paddingist auf die relative Breite der .responsive-containerselbst.
<div class="responsive-container">
<div class="dummy"></div>
</div>
.responsive-container { width: 60%; }
.responsive-container .dummy {
padding-top: 100%; /* 1:1 square */
padding-top: 75%; /* w:h = 4:3 */
padding-top: 56.25%; /* w:h = 16:9 */
}
Demo # 1 .
Demo # 2 (Verwenden von :afterPseudoelementen)
Hinzufügen des Inhalts
Die Verwendung von padding-topEigenschaften führt zu einem großen Platz am oberen oder unteren Rand des Inhalts im Container .
Um dies zu beheben, haben wir den Inhalt von einem Hüllenelement wickeln, das Element aus dem Dokument normalen Fluss entfernen durch Verwendung absolute Positionierung , und erweitert schließlich die Umhüllung (bu verwenden top, right, bottomund leftEigenschaften) , um den gesamten Raum der Mutter zu füllen, der Behälter .
Auf geht's:
.responsive-container {
width: 60%;
position: relative;
}
.responsive-container .wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
Hier ist die Online-Demo .
Alles zusammen bekommen
<div class="responsive-container">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/150x150" alt="">
</div>
</div>
.img-container {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
}
Hier ist die ARBEITSDEMO .
Natürlich können Sie die Verwendung von ::beforePseudoelementen aus Gründen der Browserkompatibilität vermeiden und ein Element als erstes untergeordnetes Element erstellen von .img-container:
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/150x150" alt="">
</div>
.img-container .centerer {
display: inline-block;
vertical-align: middle;
height: 100%;
}
AKTUALISIERTE DEMO .
Mit max-*Eigenschaften
Um das Bild in der Box in geringerer Breite zu halten, können Sie Folgendes für das Bild festlegen max-heightund festlegen max-width:
.img-container img {
vertical-align: middle;
display: inline-block;
max-height: 100%; /* <-- Set maximum height to 100% of its parent */
max-width: 100%; /* <-- Set maximum width to 100% of its parent */
}
Hier ist die AKTUALISIERTE DEMO .