CSS Posisi Teks di Tengah Secara Vertikal dan Horizontal
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 Comments:
Hasilnya bagaimana ni kak ?
By IRIL SAGITA, at Sunday, January 27, 2013 at 7:00:00 PM GMT+7
coba tes aja
By abang ichal, at Monday, January 28, 2013 at 1:01:00 PM GMT+7
kuncinya ada di varibael
line-height: ;
By Beben Koben, at Monday, January 28, 2013 at 6:39:00 PM GMT+7
klo saya menggunakan metode seperti ini jika membuat menu navigasi yang satu baris..
By Unknown, at Wednesday, January 30, 2013 at 3:18:00 PM GMT+7
Menentukan line-height juga bisa menyingkat beberapa deklarasi CSS pada menu navigasi, terutama soal padding. Dengan menentukan line-height dan height, maka kita tidak perlu lagi mengeset padding-top dan padding-bottom, cukup padding-left dan padding-right. Teks sudah tertata di tengah secara vertikal:
nav {
font:normal bold 11px/30px Arial,Sans-Serif; /* line-height disatukan dengan font-size */
height:30px;
background-color:black;
}
nav ul,
nav li {
margin:0 0;
padding:0 0;
list-style:none;
}
nav li {
float:left;
display:inline;
}
nav a {
display:block;
text-decoration:none;
color:white;
/* cuma butuh padding-left dan padding-right */
padding-left:15px;
padding-right:15px;
}
nav a:hover {background-color:darkblue}
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
line-height juga bisa disatukan dengan font (disatukan dengan ukuran huruf):
/* font:font-style font-weight font-size/line-height font-family */
font:italic bold 12px/30px Serif;
By Taufik Nurrohman, at Wednesday, January 30, 2013 at 6:06:00 PM GMT+7
iya mas css paddingx jd lebih sdikit..
wah saya baru tahu klo cara penggabungan css font ternyata begitu...
dapat lagi sedikit ilmu..
By Unknown, at Friday, February 1, 2013 at 4:37:00 PM GMT+7
kalo pake satuan % pada line-height bisa tak mas ? :\ misalkan line-height: 50%; atau 20% gitu....
By Adi Nugraha Y, at Saturday, February 9, 2013 at 8:27:00 AM GMT+7
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.
By Taufik Nurrohman, at Saturday, February 9, 2013 at 1:39:00 PM GMT+7
Mas Bagaimana kalo yang diposisikan ditengah itu bukan text
contohnya meletakkan gambar di tengah2
bagaimana caranya mas ? :-bd
By Unknown, at Tuesday, February 12, 2013 at 5:22:00 PM GMT+7
⇒ /2012/01/how-to-centering-element-with-css.html
By Taufik Nurrohman, at Wednesday, February 13, 2013 at 7:15:00 AM GMT+7
Gan kalo mau buat tulisan jadi vertikal gimana ya ?
http://typepedia.blogspot.com/2015/05/synthesis-development-indonesia-developer-property.html
By Anonymous, at Saturday, May 16, 2015 at 7:33:00 PM GMT+7
Pakai “CSS transform: rotate”
By Taufik Nurrohman, at Monday, May 18, 2015 at 9:59:00 PM GMT+7
Google Hermes++
makasih bosss
saya coba deh
By Go Hermes, at Saturday, October 17, 2015 at 10:34:00 PM GMT+7
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
By Unknown, at Thursday, February 4, 2016 at 4:07:00 PM GMT+7
thanks gan :v
By Wong Makassar, at Sunday, October 16, 2016 at 2:54:00 PM GMT+7
Post a Comment
<< Home