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 ?
coba tes aja
kuncinya ada di varibael
line-height: ;
klo saya menggunakan metode seperti ini jika membuat menu navigasi yang satu baris..
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;
iya mas css paddingx jd lebih sdikit..
wah saya baru tahu klo cara penggabungan css font ternyata begitu...
dapat lagi sedikit ilmu..
kalo pake satuan % pada line-height bisa tak mas ? :\ misalkan line-height: 50%; atau 20% gitu....
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.
Mas Bagaimana kalo yang diposisikan ditengah itu bukan text
contohnya meletakkan gambar di tengah2
bagaimana caranya mas ? :-bd
⇒ /2012/01/how-to-centering-element-with-css.html
Gan kalo mau buat tulisan jadi vertikal gimana ya ?
http://typepedia.blogspot.com/2015/05/synthesis-development-indonesia-developer-property.html
Pakai “CSS transform: rotate”
Google Hermes++
makasih bosss
saya coba deh
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
thanks gan :v
Post a Comment
<< Home