CSS

CSS Align

Dalam CSS, beberapa properti digunakan untuk menyelaraskan elemen secara horizontal.

CSS Align – Menyelaraskan Elemen Blok

Sebuah elemen blok merupakan elemen yang mengambil lebar penuh yang tersedia, dan memiliki satu baris sebelum dan setelah itu.

Contoh elemen blok:

  • <h1>
  • <p>
  • <div>

Untuk menyelaraskan teks, lihat bab CSS Teks.

Dalam bab ini kami akan menunjukkan bagaimana cara untuk menyelaraskan elemen blok secara horizontal untuk keperluan tata letak.


CSS Align – Center Align Menggunakan Properti margin

Blok elemen dapat disejajarkan dengan menetapkan margin kiri dan kanan untuk “auto”.

Catatan: Menggunakan margin: auto tidak akan bekerja di IE8 dan sebelumnya, kecuali DOCTYPE dideklarasikan.

Mengatur margin kiri dan kanan ke auto menetapkan bahwa mereka harus membagi margin yang sama. Hasilnya adalah elemen berpusat (center):

<!DOCTYPE html>

<html>

<head>

<style type=”text/css”>

.center

{

margin:auto;

width:70%;

background-color:#b0e0e6;

}

</style>

</head>

<body>

<div class=”center”>

<p>Kita sedang berada di stilearning.com untuk belajar membuat website.</p>

<p>belajar membuat website itu mudah, kita akan menikmatinya.</p>

</div>

</body>

</html>


CSS Align – Penyelarasan Kiri dan Kanan Menggunakan Properti position

Salah satu metode penyelarasan elemen adalah dengan menggunakan posisi absolut:

.kanan

{

position:absolute;

right:0px;

width:300px;

background-color:#b0e0e6;

}

Catatan: elemen diposisikan absolute agar dikeluarkan dari aliran normal, sehingga dapat tumpang tindih dengan elemen lain.

Ketika menyelaraskan elemen menggunakan align, itu merupakan ide bagus untuk standar margin dan padding untuk elemen <body>. Hal ini untuk menghindari perbedaan visual dalam browser yang berbeda.

Ada masalah dengan IE8 dan sebelumnya, bila menggunakan properti position. Jika elemen kontainer (dalam kasus kami <div>) memiliki lebar tertentu, dan deklarasi DOCTYPE tidak ada, versi IE8 dan sebelumnya akan menambah margin 17px di sisi kanan. Hal ini tampaknya menjadi ruang yang disediakan untuk scrollbar. Selalu deklarasikan DOCTYPE saat menggunakan properti position:

body

{

margin:0;

padding:0;

}

.kontainer

{

position:relative;

width:100%;

}

.kanan

{

position:absolute;

right:0px;

width:300px;

background-color:#b0e0e6;

}


CSS Align – Penyelarasan Kiri dan Kanan Menggunakan Properti float

Salah satu metode penyelarasan elemen adalah dengan menggunakan properti float:

.kanan

{

float:right;

width:300px;

background-color:#b0e0e6;

}

Ketika menyelaraskan elemen menggunakan float, itu merupakan ide bagus untuk standar margin dan padding untuk elemen <body>. Hal ini untuk menghindari perbedaan visual dalam browser yang berbeda.

Ada masalah dengan IE8 dan sebelumnya ketika menggunakan properti float. Jika deklarasi DOCTYPE tidak ada, versi IE8 dan sebelumnya akan menambah margin 17px di sisi kanan. Hal ini tampaknya menjadi ruang yang disediakan untuk scrollbar. Selalu deklarasikan DOCTYPE saat menggunakan properti float:

body

{

margin:0;

padding:0;

}

.kanan

{

float:right;

width:300px;

background-color:#b0e0e6;

}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s