Dokumen ini adalah terjemahan dari CSS tips & tricks - CSS: centering things dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/Style/Examples/007/center

Penerjemah: Edwin Rene

Web Style Sheets
CSS tips & tricks

(This page uses CSS style sheets)

Baris

Blok

Vertikal

Demo

Menengahkan hal

Sebuah tugas umum untuk CSS adalah untuk menengahkan text atau gambar (centering). Faktanya, ada tiga jenis macam centering:

menengahkan barisan teks

Hal yang paling umum dan (oleh sebab itu) paling mudah untuk dilakukan adalah barisan teks pada sebuah paragraf atau heading. CSS mempunyai perperti 'text-align' untuk hal tersebut:

P { text-align: center }
H2 { text-align: center }

yang merender tiap baris dalam sebuah P atau dalam sebuah H2 menjadi ke tengah, diantara marginnya, seperti berikut:

Baris dalam paragraf ini semuanya berada ditengah antara margin, dikarenakan nilai 'center' dari properti CSS 'text-align'.

Menengahkan sebuah blok atau gambar

Terkadang bukan teks yang butuh untuk diposisikan di tengah, tetapi sebuah blok secara keseluruhan. Atau, bila dikatakan dengan cara lain: kita ingin margin kira dan kanan menjadi sama. Cara melakukan hal tersebut adalah untuk membuat nilai margin menjadi 'auto'. Hal ini umumnya dilakukan dengan sebuah blok dengan lebar yang sudah ditetapkan, karena bila blok tersebut bersifat fleksibel, maka akan mengambil seluruh tempat yang bisa diambilnya. Berikut sebuah contoh:

P.blocktext {
margin-left: auto;
margin-right: auto;
width: 6em
}
...
<P class="blocktext">This rather...

Blok teks yang cukup  sempit ini diposisikan di tengah. Perlu diingat bahwa tulisannya sendiri tidak di tengahkan (mereka diposisikan di kiri), tidak seperti contoh sebelumnya.

Ini juga merupakan cara untuk memposisikan gambar di tengah: buat sebuah blok untuk gambar tersebut dan terapkan properti margin  pada blok tersebut. Contoh:

IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Gambar berikut diposisikan ditengah: some random image

Menengahkan secara vertikal

CSS tingkat 2 tidak memiliki properti untuk menengahkan hal secara vertikal. Kemungkiann hal ini akan ada di CSSlevel 3. Tetapi dengan CSS2 anda dapat memposisikan blok di tengah secara vertikal, dengan mengkombinasikan beberapa properti. Triknya adalah dengan menyatakan blok luar untuk diformat sebagai cell dari tabel, karena isi dari cell dari tabel dapat diposisikan di tengah secara vertikal.

Contoh di bawah memposisikan sebuah paragraf ditengah sebuah blok dengan tinggi yang ditentukan. Sebuah contoh terpisah menampilkan paragraf tersebut sebuah paragraf yang ada ditengah secara vertikal pada jendela browser, karena hal tersebut berada dalam sebuah blok yang diposisikan secara absolut dan tingginya sama dengan tinggi jendela.

DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>

Paragraf singkat ini diposisikan ditengah secara vertikal.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 5 May 2001;
last updated $Date: 2007/10/27 00:47:14 $ GMT