Width and centering · Lebar dan perataan tengah
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Halaman ini memerlukan browser terbaru (dengan dukungan SharedArrayBuffer). Silakan perbarui Chrome, Edge, Firefox, atau Safari ke versi terbaru.
English
Width
- By default, a block box is as wide as the page.
width: 300px;makes it a fixed width instead.max-width: 600px;is gentler — at most this wide, but shrink on small screens.
Bahasa Indonesia
Lebar
- Secara default, kotak block memiliki lebar sebesar halaman.
width: 300px;mengubahnya menjadi lebar tetap.max-width: 600px;lebih ramah — paling lebar ini, tetapi mengecil di layar kecil.
English
Centering a box
- To center a box (not just its text), give it a width, then
margin: 0 auto;. 0 automeans no top/bottom margin, and equal left/right margins.- Equal side margins push the box into the middle.
Bahasa Indonesia
Memusatkan kotak
- Untuk memusatkan sebuah kotak (bukan hanya teksnya), berikan lebar, lalu
margin: 0 auto;. 0 autoberarti tidak ada margin atas/bawah, dan margin kiri/kanan yang sama.- Margin samping yang sama mendorong kotak ke tengah.
<style>
.card {
width: 280px;
margin: 0 auto;
padding: 16px;
background-color: #eef;
}
</style>
<div class="card">A centered card.</div>
English
Common mistakes
- Centre a block with a set width using
margin: 0 auto. - A width in
%is relative to the parent element.
Bahasa Indonesia
Kesalahan umum
- Pusatkan blok dengan lebar tertentu menggunakan
margin: 0 auto. - Lebar dalam
%relatif terhadap elemen induk.
English
Now you try
- A box needs a width before
margin: 0 auto;can center it. - Set a width, then center the card.
Bahasa Indonesia
Sekarang Anda coba
- Kotak membutuhkan lebar sebelum
margin: 0 auto;dapat memusatkannya. - Tetapkan lebar, lalu pusatkan kartu.
Explore · Jelajahi
Width and the box · Lebar dan kotak
Width sets the content size; padding/border/margin add around it. · Lebar menetapkan ukuran konten; padding/border/margin menambah di sekelilingnya.
Give the card a fixed width. Add width: 300px; to the .card rule. · Berikan kartu lebar tetap. Tambahkan width: 300px; ke aturan .card.
Center the card on the page. Add margin: 0 auto; to the .card rule. · Pusatkan kartu di tengah halaman. Tambahkan margin: 0 auto; ke aturan .card.