Tata Letak CSS - Perataan Horizontal & Vertikal
Pusatkan elemen
secara horizontal dan vertikal
Elemen Rata Tengah
Untuk memusatkan elemen blok secara horizontal (seperti <div>), gunakanmargin: auto;
Mengatur lebar elemen akan mencegahnya meregang ke tepi wadahnya.
Elemen kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi rata antara dua margin:
Elemen div ini berada di tengah.
Contoh
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Catatan: Perataan tengah tidak berpengaruh jika widthproperti tidak disetel (atau disetel ke 100%).
Teks Rata Tengah
Untuk hanya memusatkan teks di dalam elemen, gunakantext-align: center;
Teks ini berada di tengah.
Contoh
.center {
text-align: center;
border: 3px solid green;
}
Tip: Untuk contoh lebih lanjut tentang cara menyelaraskan teks, lihat bab Teks CSS .
Pusatkan Gambar
Untuk memusatkan gambar, atur margin kiri dan kanan ke autodan buat menjadi blockelemen:
Contoh
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Rata Kiri dan Kanan - Menggunakan posisi
Salah satu metode untuk menyelaraskan elemen adalah dengan menggunakan position: absolute;:
Di tahun-tahun saya yang lebih muda dan lebih rentan, ayah saya memberi saya beberapa nasihat yang telah saya pikirkan sejak saat itu.
Contoh
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Catatan: Elemen posisi absolut dihilangkan dari aliran normal, dan elemen dapat tumpang tindih.
Rata Kiri dan Kanan - Menggunakan float
Metode lain untuk menyelaraskan elemen adalah dengan menggunakan floatproperti:
Contoh
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Peretasan clearfix
Catatan: Jika suatu elemen lebih tinggi dari elemen yang menampungnya, dan elemen tersebut melayang, elemen tersebut akan meluap di luar wadahnya. Anda dapat menggunakan "clearfix hack" untuk memperbaikinya (lihat contoh di bawah).
Tanpa Clearfix
Dengan Clearfix
Kemudian kita dapat menambahkan hack clearfix ke elemen yang mengandung untuk memperbaiki masalah ini:
Contoh
.clearfix::after {
content: "";
clear: both;
display: table;
}
Tengahkan Secara Vertikal - Menggunakan bantalan
There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:
I am vertically centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
}
To center both vertically and horizontally, use padding and text-align: center:
I am vertically and horizontally centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Center Vertically - Using line-height
Another trick is to use the line-height property with a value that is equal
to the height property:
I am vertically and horizontally centered.
Example
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the
following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Center Vertically - Using position & transform
If padding and line-height
are not options, another solution is to use positioning and the transform property:
I am vertically and horizontally centered.
Example
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Tip: You will learn more about the transform property in our 2D Transforms Chapter.
Center Vertically - Using Flexbox
You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:
Example
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.