Wie richtet man Inhalte innerhalb eines Divs mit fester Größe browserübergreifend vertikal aus?

Vertikale Ausrichtung innerhalb einer definierten Div

Frage:

So richten Sie beliebige Inhalte vertikal aus innerhalb eines Divs mit angegebener Breite und Höhe, um die Einheitlichkeit in allen Browsern sicherzustellen und Tabellenzellen zu vermeiden Lösungen?

Antwort:

Es gibt mehrere Methoden, um in diesem Szenario eine vertikale Ausrichtung zu erreichen:

Version 1: Übergeordnetes Div mit Anzeige als Tabellenzelle

Dieser Ansatz beinhaltet das Festlegen der Anzeigeeigenschaft des übergeordneten Divs auf Tabellenzelle und das Ausrichten des Inhalts vertikal mit „vertikal-align:middle“.

Version 2: Übergeordnetes Div mit Anzeigeblock und Inhaltsanzeigetabellenzelle

Hier wird das übergeordnete Div auf Anzeigeblock eingestellt , während dem Inhalts-Div die Anzeigetabellenzelle zugewiesen wird und die vertikale Ausrichtung mit „vertikal-align: middle“ erreicht wird.

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

Bei dieser Methode wird das übergeordnete Div schwebend dargestellt und das Inhalts-Div wird so eingestellt, dass es eine Tabellenzelle mit vertikaler Ausrichtung anzeigt, die mithilfe von „vertikal-align: middle“ angewendet wird.

Version 4: Relative übergeordnete Div-Position mit absoluter Inhaltsposition

Dieser Ansatz erfordert präzise Berechnungen für bestimmte Implementierungen. Das übergeordnete Div ist relativ positioniert, und das Inhalts-Div ist absolut positioniert, wobei sein oberer Wert auf 50 % und die Höhe auf 50 % festgelegt sind. Der obere Rand wird als die Hälfte der Höhe des Inhalts-Divs mit einem negativen Vorzeichen berechnet.

Das obige ist der detaillierte Inhalt vonWie richtet man Inhalte innerhalb eines Divs mit fester Größe browserübergreifend vertikal aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!