Cara Vertikal Tengah Align Text di Div

Pelajari cara tengah vertikal menyelaraskan teks dalam elemen DIV. Anda dapat mencapai ini dengan tinggi sifat CSS dan line-height. Sangat mudah dan sederhana!

A+ A-

"Mengapa orang CSS ini telah membuat alignment vertikal teks dalam DIV begitu sulit? Apakah mungkin untuk Teks rata tengah dalam elemen DIV? ", Ini adalah belibis dari sejumlah web designer.

Pada saat kita semua bertanya-tanya mengapa keselarasan tengah teks dalam div adalah suatu tugas non-intuitif dalam web-development.It sempurna mudah horizontal menyelaraskan teks dengan bantuan properti text-align.

Tetapi keselarasan vertikal juga merupakan fitur yang sama pentingnya dan sering dibutuhkan. standar CSS, bagaimanapun, selalu disimpan cukup tentang hal ini.

Nah, anyway, hari ini saya akan menunjukkan solusi sederhana. Ini mungkin tidak berguna dalam semua kasus tapi pasti bisa berguna kadang-kadang.

Untuk Teks rata vertikal tengah dalam elemen DIV, kita perlu menggunakan properti tinggi CSS dari elemen DIV dan line-height properti CSS dari teks yang perlu diselaraskan. Jika kita menetapkan kedua sifat ini untuk nilai yang sama teks akan muncul secara vertikal tengah sejajar dalam elemen DIV.

Mari kita lihat contoh:

Aku teks selaras secara vertikal tengah!

Berikut adalah kode CSS yang harus Anda gunakan:

#myDiv {
height: 70px;
background: #BBDBFB;
padding-left: 10px;
margin: 10px auto;
border: 1px solid # 000;
}

#myText {
line-height: 70px;
}

<div id = "myDiv"> <span id = "myText"> Aku vertikal tengah selaras! </ span> </ div>

Seperti yang saya sebutkan sebelumnya, menjaga kedua sifat disorot untuk nilai yang sama (70px dalam contoh di atas)

Secara default, potongan teks di dalam DIV tetap menyelaraskan vertikal menengah sehubungan dengan line-height-nya. Oleh karena itu, segera setelah kami meningkatkan line-height untuk membuatnya sama dengan tinggi dari yang mengandung elemen teks -the mulai muncul menyelaraskan tengah sehubungan dengan unsur yang mengandung juga.

Mudah dan logis! Berharap tip ini akan berguna bagi Anda. Anda juga mungkin ingin melihat bagaimana Anda dapat mengatur dua atau lebih elemen div berdampingan. Tetap terhubung dengan TechWelkin untuk tips tech seperti yang berguna!