Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich Inhalte innerhalb eines Divs mit definierter Höhe und Breite vertikal ausrichten?

Wie kann ich Inhalte innerhalb eines Divs mit definierter Höhe und Breite vertikal ausrichten?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-15 04:26:02168Durchsuche

How can I vertically align content within a div with defined height and width?

Vertikale Ausrichtung von Inhalten innerhalb bestimmter Div-Abmessungen

Die vertikale Ausrichtung von Inhalten innerhalb eines Divs mit definierter Höhe und Breite ist eine häufige Anforderung in der Webentwicklung . Um diese Ausrichtung zu erreichen, ziehen Sie die folgenden Methoden in Betracht:

1. Übergeordnetes Div als Tabellenzelle:

  • Stellen Sie die Anzeige des übergeordneten Divs auf Tabellenzelle ein und richten Sie es vertikal in der Mitte aus.
  • Diese Lösung richtet den Inhalt in Browsern vertikal aus Unterstützung display:table-cell.

2. Übergeordnetes Div mit Blockanzeige und Inhalt als Tabellenzelle:

  • Behalten Sie das übergeordnete Div als Blockelement bei, aber stellen Sie die Anzeige des Inhalts auf Tabellenzelle ein.
  • Dies Die Methode basiert auf der Fähigkeit des übergeordneten Divs, eine Tabellenzelle zu halten.

3. Übergeordnetes Div-Floating und Inhalts-Div als Tabellenzelle:

  • Lassen Sie das übergeordnete Div schweben und stellen Sie die Anzeige des Inhalts-Divs auf Tabellenzelle ein.
  • Dieser Ansatz erreicht eine Ausrichtung ohne Änderungen die Anzeigeeigenschaft des übergeordneten Div.

4. Übergeordnetes Div mit relativer Position und Inhalt mit absoluter Position:

  • Positionieren Sie das übergeordnete Div relativ und legen Sie das Inhalts-Div absolut fest.
  • Zentrieren Sie den Inhalt vertikal, indem Sie oben:50 festlegen % und margin-top:-50 % auf die Inhaltsdiv.
  • Diese Methode bietet eine präzise, ​​aber manuelle Ausrichtung für bestimmte Szenarien.

Das obige ist der detaillierte Inhalt vonWie kann ich Inhalte innerhalb eines Divs mit definierter Höhe und Breite vertikal ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn