Titik Tengah yang Sempurna

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 48 dari 76.

Dalam CSS, mencapai "pusat sempurna", yaitu memusatkan elemen secara horizontal dan vertikal di dalam induknya, merupakan tantangan tata letak yang umum. Flexbox memberikan solusi yang elegan dan sederhana untuk masalah ini. Dengan menggabungkan property justify-content dan align-items, kamu bisa dengan mudah memusatkan elemen anak di dalam kontainer flex-nya, terlepas dari ukuran elemen anak atau induknya.

Berikut cara mendapatkan posisi tengah yang sempurna menggunakan Flexbox:

.container {
    display: flex; /* Jadikan elemen induk sebagai kontainer flex */
    justify-content: center; /* Tempatkan elemen anak di tengah secara horizontal pada sumbu utama */
    align-items: center; /* Tempatkan elemen anak di tengah secara vertikal pada sumbu silang */
}

Agar teknik ini bekerja secara efektif, pastikan flex container memiliki tinggi yang ditentukan. Jika tinggi container tidak ditetapkan secara eksplisit, tingginya hanya akan sesuai dengan kontennya, sehingga pemusatan vertikal mungkin tidak terlihat.

Berikut contoh cara menggunakan teknik ini dalam HTML:

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Atur tinggi tertentu untuk container */
    border: 1px solid black; /* Opsional: Tambahkan garis tepi agar lebih mudah dilihat */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

Dalam contoh ini, elemen .container memiliki tinggi 300px, dan elemen .child akan tepat berada di tengah, baik secara horizontal maupun vertikal, di dalamnya.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan elemen induk (<div>) yang berisi elemen anak (<div>). Tugasmu adalah menggunakan Flexbox untuk memusatkan elemen anak dengan sempurna di dalam elemen induk. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div> dengan class parent.
Atur property display pada elemen .parent menjadi flex untuk menjadikannya kontainer flex.
Atur property justify-content pada elemen .parent menjadi center untuk memusatkan elemen anak secara horizontal.
Atur property align-items pada elemen .parent menjadi center untuk memusatkan elemen anak secara vertikal.
Beri elemen .parent tinggi sebesar 200px agar pemusatan vertikal terlihat.

Coba sendiri

<html>
<head>
    <title>The Perfect Center</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Center Me</div>
    </div>
</body>
</html>