CSS Posisi Teks di Tengah Secara Vertikal dan Horizontal
Tabel Konten
CSS
div {
width:100px; /* dimensi lebar */
height:100px; /* dimensi tinggi */
line-height:100px; /* sama dengan tinggi elemen, posisi di tengah secara vertikal */
text-align:center; /* posisi di tengah secara horizontal */
background-color:maroon;
color:white;
}
Markup HTML
<div>ABC</div>
15 Komentar
IRIL SAGITA
Hasilnya bagaimana ni kak ?
abang ichal
coba tes aja
Beben Koben
kuncinya ada di varibael
line-height: ;
Unknown
klo saya menggunakan metode seperti ini jika membuat menu navigasi yang satu baris..
Taufik Nurrohman
Menentukan
line-height
juga bisa menyingkat beberapa deklarasi CSS pada menu navigasi, terutama soalpadding
. Dengan menentukanline-height
danheight
, maka kita tidak perlu lagi mengesetpadding-top
danpadding-bottom
, cukuppadding-left
danpadding-right
. Teks sudah tertata di tengah secara vertikal:line-height juga bisa disatukan dengan font (disatukan dengan ukuran huruf):
Unknown
iya mas css paddingx jd lebih sdikit..
wah saya baru tahu klo cara penggabungan css font ternyata begitu...
dapat lagi sedikit ilmu..
Adi Nugraha Y
kalo pake satuan % pada line-height bisa tak mas ? :\ misalkan
line-height: 50%;
atau 20% gitu....Taufik Nurrohman
Kalau tujuannya untuk memposisikan teks di tengah secara vertikal, satuan harus disamakan dengan satuan area, tapi kalau masalah apakah
line-height
bisa memakai satuan persen atau tidak, jawabannya bisa.100%
artinya sama dengan tinggi huruf.Unknown
Mas Bagaimana kalo yang diposisikan ditengah itu bukan text
contohnya meletakkan gambar di tengah2
bagaimana caranya mas ? :-bd
Taufik Nurrohman
⇒ /2012/01/how-to-centering-element-with-css.html
Yowanda Erlangga
Gan kalo mau buat tulisan jadi vertikal gimana ya ?
http://typepedia.blogspot.com/2015/05/synthesis-development-indonesia-developer-property.html
Taufik Nurrohman
Pakai “CSS transform: rotate”
Go Hermes
Google Hermes++
makasih bosss
saya coba deh
Unknown
klo misalkan teks nya dinamic misalkan judul.. kadang 1 baris kadang 2 baris atau malah 3 baris... tp saya ingin posisinya selalu di tengah. sedangkan elemen pembungkusnya ukurannya fixs...
ada saran ga master..??
sebagai gambaran
?div id="bungkus"??h1?judul kadang satu baris kadanglebih?/h1??div?
ukuran bungkusnya fiks misal
#bungkus {width:200px; height:80px;}
terimakasi sebelumnya.. n_n
Wong Makassar
thanks gan :v