Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

CSS Align, Mengatur Alignment elemen HTML

Mengatur Alignment elemen HTML - Dalam CSS, ada beberapa properti yang bisa digunakan untuk mengatur alignment (rata kanan, kiri, dan tengah) suatu elemen HTML secara horizontal. Yaitu margin, position, dan float. Selengkapnya simak ulasannya satu per satu berikut ini.

3 Cara untuk Mengatur Posisi Alignment elemen HTML


1. Center Align (Rata Tengah) – Menggunakan Margin


Mengatur lebar suatu elemen bisa mencegahnya dari meregang ke luar jalur tepi container (wadah). Gunakan margin: auto agar elemen menjadi rata tengah dan tetap berada di dalam wadah.
Dengan menggunakan margin:auto, elemen akan mengambil lebar yang sudah ditentukan, sedangkan ruang yang tersisa akan dibagi sama antara kedua margin. Jadi akan terlihat rapi.

Contoh penggunaannya seperti ini :


<!DOCTYPE html>
<html>
<head>
<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid red;
    padding: 10px;
}
</style>
</head>
<body>

<div class="center">
  <p><b>Ket: </b>Ini contoh elemen dengan alignment rata tengah menggunakan margin:auto.</p>
</div>

</body>
</html>

Maka hasilnya :

mengatur alignment elemen html

Sebagai tambahan, center align menggunakan margin:auto ini tidak akan berfungsi jika pada properti width tidak ditentukan ukurannya, atau ditentukan tapi dengan ukuran 100%.

2. Left dan Right Align (Rata Kiri dan Kanan) – Menggunakan Position


Selanjutnya adalah menentukan alignment suatu elemen HTML dengan menggunakan properti Position, yaitu position:absolute. Sebagai contoh, di bawah ini adalah contoh penggunaan position:absolute untuk membuat rata kanan suatu elemen.


<!DOCTYPE html>
<html>
<head>
<style>
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid red;
    padding: 10px;
}
</style>
</head>
<body>

<div class="right">
  <p>Kalo yang ini adalah contoh menentukan alignment suatu elemen menggunakan position:absolute</p>
</div>

</body>
</html>

Hasilnya :

mengatur alignment elemen html

3. Left dan Right Align (Rata Kiri dan Kanan) – Menggunakan Float


Hampir sama dengan penggunaan properti position:absolute untuk menentukan alignment rata kanan atau kiri suatu elemen HTML, hanya yang ini dengan menggunakan properti float diikuti dengan mendefinisikan posisi alignment yang diinginkan, kanan atau kiri.

Di bawah ini adalah contoh penggunaan properti float untuk membuat suatu elemen HTML menjadi rata kiri. Sehingga yang digunakan adalah float:left.


<!DOCTYPE html>
<html>
<head>
<style>
.right {
    float: left;
    width: 300px;
    border: 3px solid red;
    padding: 10px;
}
</style>
</head>
<body>

<div class="right">
  <p>Kalo yang ini adalah contoh menentukan alignment suatu elemen menggunakan float.</p>
</div>

</body>
</html>

Hasilnya :

mengatur alignment elemen html
Itulah tiga properti CSS yang bisa digunakan untuk menentukan alignment suatu elemen HTML, baik rata kanan, rata kiri, ataupun rata tengah. Sedangkan alignment untuk teks bisa kamu simak di Mengenal CSS Text dan Penggunaannya.



4 Komentar untuk "CSS Align, Mengatur Alignment elemen HTML"

Cari Situs Judi Online yang fair ?
No BOT - No ADMIN dan murni PLAYER vs PLAYER
Solusinya hnya di SAHABATKARTU Agen BandarQ TERPERCAYA
Hanya dengan nominal deposit 20ribu sudah bisa bermain 7 game
Dan raih jackpot puluhan sampai ratusan juta setiap harinya..
PIN BB : 2BCDBEE2

Susah menang di situs lain ???
Ayo daftarkan diri anda di https://sahabatkartu.net
Raih kemenangan BANDARQ ONLINE bersama kami disini..
PIN BB : 2BCDBEE2

Yuk Buruan ikutan bermain di website Sahabatkartu

Sekarang SahabatKartu Memiliki Game terbaru Dan Ternama loh...

Silahkan di rasakan sendiri seru nya bermain di SahabatKartu hanya dengan Minimal deposit Rp.20.000,- saja ^0^

=> Bonus Refferal 15%
=> Bonus Turn Over 0,2%
=> Minimal Depo 20.000
=> Minimal WD 20.000
=> 100% Member Asli
=> Pelayanan DP & WD 24 jam
=> Livechat Kami 24 Jam Online
=> Bisa Dimainkan Di Hp Android
=> Di Layani Dengan 5 Bank Terbaik

Contact :
Pin BB : 2BCDBEE2
Facebook : MingMing
FansPage : @Agensahabatkartu
Twitter : @sahabatkartu
Wechat : +687878485104
Line : +6285211227605

Link Resmi Kami :
http://sahabatkartu.net
http://sahabatkartu.info
http://sahabatkartu.org

Back To Top