Bagaimana Memusatkan Dua Perenggan Secara Menegak Di Dalam DIV?

Cara Memusatkan Dua Elemen Secara Menegak Dalam DIV

Cabaran: Memusatkan dua elemen perenggan secara menegak dalam DIV telah terbukti mencabar, walaupun mengikutinya. tutorial.

Penyelesaian:

Terdapat dua pendekatan utama untuk memusatkan elemen secara menegak dalam DIV: Jadual dan Kedudukan Flexbox dan CSS.

Kaedah Flexbox

Menggunakan Flexbox, anda boleh mencapai penjajaran tepat dengan minimum kod:

#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;
}

Kelebihan Kaedah Flexbox:

• Kod minimum
• Penjajaran ringkas
• Pilihan susun atur serba boleh
• Responsif reka bentuk

Kaedah Jadual dan Kedudukan CSS

Kaedah alternatif melibatkan jadual dan kedudukan CSS:

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;
}

Bila Menggunakan Jadual Flexbox vs. CSS dan Kedudukan:

Flexbox ialah pilihan yang disyorkan kerana ianya:

• Kecekapan unggul
• Keupayaan susun atur yang komprehensif
• Sokongan penyemak imbas yang dipertingkatkan

Flexbox dengan mudah memudahkan pemusatan menegak dan tugas penjajaran lanjutan yang lain , menjadikannya pilihan utama untuk pembangunan web moden.

Atas ialah kandungan terperinci Bagaimana Memusatkan Dua Perenggan Secara Menegak Di Dalam DIV?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!