Margin Otomatis

Pelajaran 2 dari 9 dalam kursus Cara Memusatkan Div atau Teks dengan CSS di Coddy.

Untuk memusatkan div secara horizontal, kamu bisa menggunakan property margin dengan nilai auto.

Nilai auto akan mengambil semua ruang horizontal yang tersisa.

margin: auto;

margin-left: auto; dan margin-right: auto; juga akan berfungsi!

Perhatikan: ini tidak akan memusatkannya secara vertikal!

Tantangan

Mudah

Gunakan yang sudah kamu pelajari untuk memusatkan kotak biru secara horizontal di dalam kotak merah.

Perhatikan bahwa nilai margin-left adalah 75px, bukan auto. Mengapa?

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="red-box">
            <div id="blue-box" />
        </div>
    </body>
</html>

Semua pelajaran di Cara Memusatkan Div atau Teks dengan CSS

1Pengantar

Apa itu kursus ini?

2Memusatkan Div

Margin OtomatisPosisi Absolut: Translate Posisi Absolut: Margin Flexbox Tantangan Ulasan

3Tengahkan Teks

Perataan Teks Flexbox Tantangan Akhir

Latihan sendiri: Playground Web