Posisi Elemen di Tengah dengan CSS
Ada dua metode untuk mengatur posisi elemen agar berada di tengah. Pertama, menggunakan metode margin auto
untuk posisi elemen di tengah secara horizontal. Ke dua, menggunakan margin negatif dan posisi absolut untuk posisi elemen berada di tengah secara vertikal maupun horizontal.
Posisi di Tengah secara Horizontal
Menerapkan nilai margin auto
pada sisi kiri dan kanan akan membuat elemen berada di tengah secara horizontal. Katakanlah bahwa margin auto
merupakan margin otomatis yang bisa menyesuaikan diri. Dengan menerapkan margin auto
, maka elemen seolah-olah akan menjauhkan dirinya sejauh-jauhnya dari sisi kiri dan kanan sehingga elemen di antaranya akan diam di tengah:
#page-wrap {
width:300px;
height:1000px;
margin:0 auto;
}
Posisi di Tengah secara Horizontal dan Vertikal
Caranya dengan menerapkan posisi absolut pada elemen. Atur nilai top
dan left
sebesar 50%
(gambar pertama), kemudian tarik kembali elemen menuju ke tengah dengan menuliskan nilai margin-top
dan margin-left
sebesar setengah dari tinggi dan lebar elemen dengan nilai negatif (gambar ke dua):
#page-wrap {
width:300px;
height:240px;
position:absolute;
left:50%;
top:50%;
margin-left:-150px; /* (300/2) */
margin-top:-120px; /* (240/2) */
}
Khusus untuk Internet Explorer lama biasanya memerlukan penambahaan deklarasi text-align:center
pada elemen induknya seperti ini:
body {
text-align:center;
}
#page-wrap {
text-align:left;
width:300px;
height:1000px;
margin:0 auto;
}
15 Comments:
ada juga yg share :))
udah pernah tak pikir2 juga mas :D
thx banget postingannya !
akhirnya ketemu juga masalahnya hahah
thanks om, ini sangat membantu
Kalo pake position fixed gimana bikin ke tengahnya mas?
Sama seperti absolut.
ketemu juga,, :DD mampir gan
Ada alternatif selain menggunakan margin negatif dari setengah dari lebar atau tingginya mas taufik. Kita bisa gunain translate(-50%, -50%) buat elemen yang misalkan cuma diketahui tingginya aja.
#element {
position:absolute;
z-index:10; /* misalnya */
top:50%;
left:50%;
width:80%;
transform:translate(-50%, -50%);
}
Yup. Cuma agak kurang nyaman saja sama prefiksnya. Tapi ini cocok sekali kalau diterapkan untuk mengatasi masalah elemen yang tidak memiliki lebar dan tinggi yang tetap. Misalnya gambar:
img {
display:block;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
Demo: http://jsfiddle.net/tovic/3heCz
Betul mas, kebetulan baru-baru ini saya menerapkannya di sini : [url=http://sman7bekasi.sch.id]http://sman7bekasi.sch.id[/url] dan sudah dicoba dibeberapa gadget sudah aman tampilannya :D
hontoni arigatou, sangat membantu
:D
makasih mas, sangat membantu. :)
makasih gan, ngebantu banget..... :-bd
thanks atas infonya sangat membantu
nice info
Post a Comment
<< Home