snippets
by
Admin
April 28, 2019
Cara membuat div berada di tengah menggunakan HTML dan CSS | snippets
kode di bawah ini akan membuat div berada di tengah-tengah, tengah atas, tengah bawah, tengah kiri, dan tengah kanan. anda copy code yang diperlukan saja, misalkan anda akan membuat button sosial media di kiri layar, anda ambil tag HTML dengan class box-4 beserta CSS nya yaitu .box-4
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SNIPPET</title>
<link rel="stylesheet" href="css.css" type="text/css"/>
</head>
<body>
<div class="box-1">
Box ini berada di tengah atas
</div>
<div class="box-2">
Box ini berada di tengah-tengah
</div>
<div class="box-3">
Box ini berada di tengah bawah
</div>
<div class="box-4">
Box ini berada di tengah kiri
</div>
<div class="box-5">
Box ini berada di tengah kanan
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
font-family: 'Verdana', sans-serif;
text-align: center;
}
.box-1 {
width: 200px;
padding: 20px;
background: red;
color: white;
margin: 0 auto; /* code ini akan membuat div berada di tengah atas */
}
.box-2 {
width: 200px;
padding: 20px;
background: red;
color: white;
/* code di bawah ini akan membuat div berada di tengah-tengah */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box-3 {
width: 200px;
padding: 20px;
background: red;
color: white;
/* code di bawah ini akan membuat div berada di tengah bawah */
position: absolute;
left: 50%;
transform: translate(-50%, -0%);
bottom: 0;
}
.box-4 {
width: 200px;
padding: 20px;
background: red;
color: white;
/* code di bawah ini akan membuat div berada di tengah kiri */
position: absolute;
top: 50%;
left: 0;
transform: translate(-0%, -50%);
}
.box-5 {
width: 200px;
padding: 20px;
background: red;
color: white;
/* code di bawah ini akan membuat div berada di tengah kanan */
position: absolute;
top: 50%;
right: 0;
transform: translate(-0%, -50%);
}
Posting Komentar
0 Komentar