Memusatkan Teks Secara Menegak dalam Div Menggunakan CSS

Teknik CSS Lanjutan untuk Pemusatan Menegak

Dalam skrip ketiga, kami menggunakan kaedah paparan jadual. Tetapan display: table; pada bekas dan display: table-cell; pada unsur pseudo yang dicipta dengan ::before membolehkan kita menggunakan vertical-align: middle; harta benda. Kaedah ini meniru gelagat sel jadual, menjadikannya mungkin untuk memusatkan kandungan secara menegak. Walaupun pendekatan ini kurang biasa digunakan dalam reka bentuk web moden, ia boleh berguna untuk mengekalkan keserasian dengan penyemak imbas lama atau apabila berurusan dengan kod warisan. Ia menyediakan cara yang boleh dipercayai untuk memusatkan kandungan tanpa bergantung pada sistem susun atur yang lebih baharu.

Contoh skrip keempat menggunakan line-height harta benda. Dengan menetapkan line-height sama dengan ketinggian bekas, teks dipusatkan secara menegak. Teknik ini mudah dan berkesan untuk teks satu baris. Walau bagaimanapun, ia mungkin tidak sesuai untuk teks berbilang baris atau kandungan dinamik di mana ketinggian bekas mungkin berubah. Walaupun batasannya, the line-height kaedah ialah penyelesaian yang cepat dan mudah untuk memusatkan teks secara menegak dalam senario mudah.

Menggunakan Flexbox untuk Pemusatan Menegak

CSS Flexbox

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Menggunakan Grid untuk Pemusatan Menegak

Grid CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Menggunakan Paparan Jadual untuk Pemusatan Menegak

Paparan Jadual CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

Menggunakan Ketinggian Garisan untuk Pemusatan Menegak

Ketinggian Garis CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Soalan Lazim tentang Pemusatan Menegak dalam CSS

1. Apakah cara paling mudah untuk memusatkan teks secara menegak dalam div?
2. menggunakan display: flex; dengan justify-content: center; dan align-items: center; selalunya merupakan kaedah yang paling mudah dan berkesan.
3. Bagaimanakah anda memusatkan teks secara menegak dalam pelayar lama?
4. Menggunakan kaedah paparan jadual dengan display: table; dan vertical-align: middle; boleh membantu mencapai pemusatan menegak dalam pelayar lama.
5. Bolehkah CSS Grid digunakan untuk memusatkan teks secara menegak?
6. Ya, Grid CSS boleh memusatkan teks secara menegak menggunakan display: grid; dan place-items: center;.
7. Adakah mungkin untuk memusatkan teks berbilang baris secara menegak?
8. Ya, menggunakan Flexbox atau CSS Grid boleh dengan mudah memusatkan teks berbilang baris secara menegak dalam bekas.
9. Bagaimanakah anda memusatkan teks secara menegak dengan ketinggian bekas yang diketahui?
10. Anda boleh menetapkan line-height harta yang sepadan dengan ketinggian bekas, dengan berkesan memusatkan teks.
11. Bagaimana jika ketinggian bekas adalah dinamik?
12. Menggunakan Flexbox, Grid, atau transform hartanah memastikan pemusatan menegak yang konsisten, walaupun dengan ketinggian kontena yang dinamik.
13. Adakah terdapat sebarang kelemahan untuk menggunakan transform: translateY(-50%);?
14. Walaupun berkesan, ia memerlukan ibu bapa untuk mempunyai position: relative; dan boleh menjadi lebih kompleks sedikit untuk dilaksanakan berbanding dengan Flexbox atau Grid.
15. Bagaimanakah anda memusatkan teks secara menegak dalam reka bentuk responsif?
16. Menggunakan Flexbox atau CSS Grid sangat disyorkan untuk reka bentuk responsif, kerana ia menyesuaikan dengan baik pada saiz dan orientasi skrin yang berbeza.

Pemikiran Akhir tentang Pemusatan Menegak

Mencapai pemusatan menegak teks dalam div boleh dicapai melalui beberapa kaedah yang berkesan. Teknik moden seperti Flexbox dan Grid menawarkan paling fleksibiliti dan kemudahan pelaksanaan. Kaedah lama, seperti paparan jadual dan ketinggian garisan, masih boleh berguna dalam kes tertentu. Dengan memahami dan menggunakan pendekatan berbeza ini, pembangun boleh memastikan kandungan mereka menarik secara visual dan diselaraskan dengan betul merentas pelbagai peranti dan penyemak imbas.