Heim > Web-Frontend > CSS-Tutorial > Wie zentriere ich zwei Absätze vertikal in einem DIV?

Wie zentriere ich zwei Absätze vertikal in einem DIV?

DDD
Freigeben: 2024-12-18 13:39:10
Original
769 Leute haben es durchsucht

How to Vertically Center Two Paragraphs Inside a DIV?

So zentrieren Sie zwei Elemente innerhalb eines DIV vertikal

Herausforderung: Das vertikale Zentrieren zweier Absatzelemente innerhalb eines DIV hat sich trotz der bewährten Vorgehensweise als Herausforderung erwiesen Tutorials.

Lösung:

Es gibt zwei Primäre Ansätze zur vertikalen Zentrierung von Elementen innerhalb eines DIV: Flexbox und CSS-Tabelle und -Positionierung.

Flexbox-Methode

Mit Flexbox können Sie eine präzise Ausrichtung mit minimalem Code erreichen:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

#container {

  display: flex;             

  flex-direction: column;    

  justify-content: center;   

  align-items: center;       

  height: 300px;

  border: 1px solid black;

}

 

.box {

  width: 300px;

  margin: 5px;

  text-align: center;

}

Nach dem Login kopieren

Vorteile der Flexbox-Methode:

  • Minimal Code
  • Vereinfachte Ausrichtung
  • Vielseitige Layoutoptionen
  • Responsives Design

CSS-Tabelle und Positionierungsmethode

Eine alternative Methode beinhaltet CSS-Tabellen und Positionierung:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

body {

  display: table;

  position: absolute;

  height: 100%;

  width: 100%;

}

 

#container {

  display: table-cell;

  vertical-align: middle;

}

 

.box {

  width: 300px;

  padding: 5px;

  margin: 7px auto;  

  text-align: center;

}

Nach dem Login kopieren

Wann sollte man Flexbox vs. verwenden? CSS-Tabelle und Positionierung:

Flexbox ist die empfohlene Wahl aufgrund seiner:

  • Überragende Effizienz
  • Umfassende Layoutfunktionen
  • Verbessert Browser-Unterstützung

Flexbox erleichtert mühelos die vertikale Zentrierung und andere erweiterte Ausrichtungen Aufgaben, was es zur bevorzugten Wahl für die moderne Webentwicklung macht.

Das obige ist der detaillierte Inhalt vonWie zentriere ich zwei Absätze vertikal in einem DIV?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage