Memusatkan Teks Secara Vertikal dalam Div Menggunakan CSS

Alice Dupont
Sabtu, 13 Juli 2024 21.30.16
CSS

Pusatkan Teks Secara Vertikal Di Dalam Div dengan CSS

Menyelaraskan teks secara vertikal dalam div bisa menjadi tantangan umum dalam desain web. Memastikan teks berada di tengah dengan sempurna dapat meningkatkan estetika dan keterbacaan konten Anda.

Pada artikel ini, kita akan mengeksplorasi berbagai metode untuk mencapai pemusatan teks secara vertikal dalam div menggunakan CSS. Kita akan mulai dengan contoh sederhana dan kemudian mempelajari teknik lebih lanjut untuk memastikan kompatibilitas di berbagai browser dan perangkat.

Memerintah Keterangan
display: flex; Mendefinisikan wadah fleksibel, memungkinkan penggunaan tata letak flexbox.
justify-content: center; Pusatkan item fleksibel secara horizontal di dalam wadah fleksibel.
align-items: center; Pusatkan item fleksibel secara vertikal di dalam wadah fleksibel.
display: grid; Mendefinisikan wadah grid, memungkinkan penggunaan tata letak grid.
place-items: center; Memusatkan item secara horizontal dan vertikal dalam wadah kotak.
display: table; Mendefinisikan elemen sebagai tabel, memungkinkan properti tata letak tabel diterapkan.
display: table-cell; Mendefinisikan elemen sebagai sel tabel, mengaktifkan properti perataan vertikal.
vertical-align: middle; Memusatkan konten secara vertikal dalam elemen sel tabel.
line-height: 170px; Menyetel tinggi garis sama dengan tinggi wadah untuk memusatkan teks secara vertikal.

Teknik Memusatkan Teks Secara Vertikal dengan CSS

Pada contoh skrip pertama, kami menggunakan untuk mendefinisikan wadah fleksibel. Ini memungkinkan penggunaan properti tata letak Flexbox. Dengan mengatur Dan , kita dapat memusatkan teks secara horizontal dan vertikal di dalam

elemen. Metode ini sangat efektif dan mudah diterapkan, menjadikannya pilihan populer untuk desain web modern. Flexbox sangat berguna karena daya tanggap dan kemudahan penyelarasannya, yang memungkinkan pengembang membuat tata letak yang beradaptasi dengan baik pada berbagai ukuran dan orientasi layar.

Contoh skrip kedua menggunakan tata letak CSS Grid dengan menggunakan . Dengan mengatur , teks dipusatkan secara horizontal dan vertikal di dalam wadah kisi. CSS Grid menawarkan sistem yang lebih kuat dan fleksibel untuk mendesain tata letak web dibandingkan metode tradisional. Ini memberikan kemampuan untuk membuat desain yang kompleks dan responsif dengan mudah. Itu perintah adalah cara ringkas untuk mencapai pemusatan vertikal dan horizontal, menyederhanakan kode, dan meningkatkan keterbacaan.

Teknik CSS Tingkat Lanjut untuk Pemusatan Vertikal

Pada skrip ketiga, kami menggunakan metode tampilan tabel. Pengaturan pada wadah dan pada elemen semu yang dibuat dengan 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 Properti. Dengan mengatur 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 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>

Menjelajahi Transformasi CSS untuk Pemusatan Vertikal

Metode lain yang efektif untuk memusatkan teks secara vertikal di dalam a sedang menggunakan CSS Properti. Dengan menggabungkan dengan transform: translateY(-50%);, kita dapat mencapai keselarasan vertikal yang tepat. Pertama, itu diatur ke untuk bertindak sebagai titik referensi. Kemudian, elemen anak dengan diposisikan di 50% teratas wadah induk. Akhirnya, melamar transform: translateY(-50%); menggerakkan elemen ke atas setengah dari tingginya, menempatkannya secara vertikal dengan sempurna.

Metode ini memberikan fleksibilitas yang tinggi dan bekerja dengan baik untuk berbagai jenis konten, termasuk teks dan gambar. Hal ini sangat berguna ketika menangani konten dinamis, karena efek pemusatan tetap konsisten berapa pun tinggi kontennya. Selain itu, menggabungkan dengan properti CSS lainnya memungkinkan desain tata letak yang lebih kompleks dan kreatif. Meskipun pendekatan ini memerlukan lebih banyak kode dibandingkan dengan Flexbox atau Grid, pendekatan ini menawarkan kontrol yang tepat atas posisi elemen.

  1. Apa cara termudah untuk memusatkan teks secara vertikal dalam div?
  2. Menggunakan dengan Dan seringkali merupakan metode termudah dan paling efektif.
  3. Bagaimana Anda memusatkan teks secara vertikal di browser lama?
  4. Menggunakan metode tampilan tabel dengan Dan 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 Dan .
  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 properti agar sesuai dengan tinggi wadah, yang secara efektif memusatkan teks.
  11. Bagaimana jika tinggi container bersifat dinamis?
  12. Menggunakan Flexbox, Grid, atau properti memastikan pemusatan vertikal yang konsisten, bahkan dengan ketinggian wadah yang dinamis.
  13. Apakah ada kelemahan dalam menggunakan ?
  14. Meskipun efektif, hal ini mengharuskan orang tua untuk memilikinya 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.

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.