Mecha versi 2.6.4 sudah dirilis!

CSS Posisi Teks di Tengah Secara Vertikal dan Horizontal

Tabel Konten
  1. CSS 
  2. Markup HTML 

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

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 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;

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.

Yowanda Erlangga

Gan kalo mau buat tulisan jadi vertikal gimana ya ?
http://typepedia.blogspot.com/2015/05/synthesis-development-indonesia-developer-property.html

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

Komentar telah ditutup.