html - tag - Wie wird die Mitte des Inhalts eines div mit definierter Breite/Höhe vertikal ausgerichtet?




title tag wordpress (3)

Was wäre die richtige Methode, um Inhalte in einer definierten Breite / Höhe div vertikal zu zentrieren?

In dem example gibt es zwei Inhalte mit unterschiedlichen Höhen, was ist die beste Möglichkeit, vertikal beide mit der Klasse .content . (und es funktioniert für jeden Browser und ohne die Lösung der table-cell )

Haben einige Lösungen im Sinn, möchten aber andere Ideen kennen, man verwendet position:absolute; top:0; bottom: 0; position:absolute; top:0; bottom: 0; und margin auto .


Dies könnte auch mit display: flex mit nur wenigen Codezeilen geschehen. Hier ist ein Beispiel:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

Live-Demo


Ich habe das ein wenig recherchiert und aus dem, was ich gefunden habe, haben Sie vier Möglichkeiten:

Version 1: Elternteil mit Anzeige als Tabellenzelle

Wenn es Ihnen nichts ausmacht, die display:table-cell auf Ihrem übergeordneten div zu verwenden, können Sie folgende Optionen verwenden:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

Live-Demo

Version 2: Übergeordnetes div mit Anzeigeblock und Inhaltsanzeigetabellenzelle

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

Live-Demo

Version 3: Parent-Div-Floating und Content-Div als Anzeigetabellenzelle

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

Live-Demo

Version 4: Parent-Div-Position relativ zur absoluten Content-Position

Das einzige Problem, das ich mit dieser Version hatte, ist, dass es scheint, dass Sie das CSS für jede spezifische Implementierung erstellen müssen. Der Grund dafür ist, dass das Inhalts-Div die eingestellte Höhe haben muss, die Ihr Text füllt, und der Rand oben wird davon abgeleitet. Dieses Problem kann in der Demo gesehen werden. Sie können es für jedes Szenario manuell ausführen, indem Sie die Höhe% Ihres Inhalts div ändern und mit -5 multiplizieren, um den oberen Randwert zu erhalten.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

Live-Demo


Marge: all_four_margin

Indem 50% für all_four_margin bereitgestellt wird, wird das Element in die Mitte gesetzt

style="margin: 50%"

Sie können es auch für das Folgen anwenden

Rand: oben rechts unten links

Rand: oben rechts und links unten

Rand: oben & unten rechts & links

Durch Angabe von% erhalten wir das Element wo immer wir wollen.







vertical-alignment