Memusatkan Teks Secara Vertikal dalam Div Menggunakan CSS

Teknik CSS Tingkat Lanjut untuk Pemusatan Vertikal

Pada skrip ketiga, kami menggunakan metode tampilan tabel. Pengaturan display: table; pada wadah dan display: table-cell; pada elemen semu yang dibuat dengan ::before memungkinkan kita untuk menggunakan vertical-align: middle; Properti. Metode ini meniru perilaku sel tabel, sehingga memungkinkan konten dipusatkan secara vertikal. Meskipun pendekatan ini kurang umum digunakan dalam desain web modern, pendekatan ini dapat berguna untuk menjaga kompatibilitas dengan browser lama atau saat menangani kode lama. Ini memberikan cara yang andal untuk memusatkan konten tanpa bergantung pada sistem tata letak yang lebih baru.

Contoh skrip keempat menggunakan line-height Properti. Dengan mengatur line-height sama dengan tinggi wadah, teks ditempatkan di tengah secara vertikal. Teknik ini mudah dan efektif untuk teks satu baris. Namun, ini mungkin tidak cocok untuk teks multi-baris atau konten dinamis yang tinggi wadahnya dapat berubah. Terlepas dari keterbatasannya, itu line-height metode ini adalah solusi cepat dan mudah untuk memusatkan teks secara vertikal dalam skenario sederhana.

Menggunakan Flexbox untuk Pemusatan Vertikal

Kotak Fleksibel CSS

#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 Vertikal

Kotak 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 Tampilan Tabel untuk Pemusatan Vertikal

Tampilan Tabel 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 Garis untuk Pemusatan Vertikal

Tinggi 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>

Pertanyaan Umum tentang Pemusatan Vertikal di CSS

1. Apa cara termudah untuk memusatkan teks secara vertikal dalam div?
2. Menggunakan display: flex; dengan justify-content: center; Dan align-items: center; seringkali merupakan metode termudah dan paling efektif.
3. Bagaimana Anda memusatkan teks secara vertikal di browser lama?
4. Menggunakan metode tampilan tabel dengan display: table; Dan vertical-align: middle; dapat membantu mencapai pemusatan vertikal di browser lama.
5. Bisakah CSS Grid digunakan untuk memusatkan teks secara vertikal?
6. Ya, CSS Grid dapat memusatkan teks secara vertikal menggunakan display: grid; Dan place-items: center;.
7. Apakah mungkin untuk memusatkan teks multi-baris secara vertikal?
8. Ya, menggunakan Flexbox atau CSS Grid dapat dengan mudah memusatkan teks multi-baris secara vertikal dalam sebuah wadah.
9. Bagaimana Anda memusatkan teks secara vertikal dengan tinggi wadah yang diketahui?
10. Anda dapat mengatur line-height properti agar sesuai dengan tinggi wadah, yang secara efektif memusatkan teks.
11. Bagaimana jika tinggi container bersifat dinamis?
12. Menggunakan Flexbox, Grid, atau transform properti memastikan pemusatan vertikal yang konsisten, bahkan dengan ketinggian wadah yang dinamis.
13. Apakah ada kelemahan dalam menggunakan transform: translateY(-50%);?
14. Meskipun efektif, hal ini mengharuskan orang tua untuk memilikinya position: relative; dan bisa sedikit lebih rumit untuk diterapkan dibandingkan dengan Flexbox atau Grid.
15. Bagaimana Anda memusatkan teks secara vertikal dalam desain responsif?
16. Penggunaan Flexbox atau CSS Grid sangat disarankan untuk desain responsif, karena dapat beradaptasi dengan baik pada berbagai ukuran dan orientasi layar.

Pemikiran Akhir tentang Pemusatan Vertikal

Mencapai pemusatan teks secara vertikal dalam div dapat dicapai melalui beberapa metode efektif. Teknik modern seperti Flexbox dan Grid menawarkan fleksibilitas dan kemudahan penerapan paling tinggi. Metode lama, seperti tampilan tabel dan tinggi garis, masih berguna dalam kasus tertentu. Dengan memahami dan menerapkan berbagai pendekatan ini, pengembang dapat memastikan konten mereka menarik secara visual dan diselaraskan dengan baik di berbagai perangkat dan browser.