Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
margin-auto tidak berfungsi
saya membuat html seperti ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial Sushi</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navbar -->
<div class="navbar">
<div class="block">
<h2>Tutorial Membuat Sushi</h2>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">About me</a></li>
</div>
</div>
<!-- content -->
<div class="content">
<div class="jumbotron">
<div class="mulai">
<a href="#">Mulai Membuat</a>
</div>
</div>
<div class="tutorial">
<div class="cara">
<h2>Cara Membuat sushi</h2>
</div>
<div class="garis">
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
</div>
</body>
</html>
dan css seperti ini
body{
margin: 0;
}
.navbar{
display: flex;
background-color: yellow;
position: fixed;
width: 100%;
height: 50px;
z-index: 4;
}
.navbar div{
height: 30px;
}
.navbar div h2{
display: inline-block;
}
.navbar div li{
display: inline-block;
margin-right: 10px;
}
.content{
height: 1000px;
}
.jumbotron{
background: grey;
width: 100%;
height: 700px;
}
.mulai{
display: inline-block;
border: 5px solid black;
margin: auto;
margin-top: 300px;
height: 50px;
width: 20%;
}
.tutorial{
width: 100%;
height: 2000px;
background-color: #fefefe;
}
.garis{
width: 50%;
height: 2000px;
border-right: 10px solid black;
}
.content .tutorial .cara{
text-align: center;
width: 100%;
position: relative;
}
tapi margin-auto tidak berfungsi untuk membuat .mulai menjadi center. Mohon pencerahanya
Tanggapan
Mungkin karena inline-block
2 Jawaban:
Jawaban Terpilih
<pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tutorial Sushi</title> <style>
- { box-sizing: border-box; }
body{ margin: 0; }
.navbar{ background-color: yellow; position: fixed; width: 100%; padding:20px; z-index: 4; }
.left { float: left; width: 30%; }
.right { float: right; width: 70%; vertical-align: middle; display: block; text-align: center; }
.left h2 { margin: 0; }
ul.menu { margin: 0; padding: 0; }
.navbar div{ height: 30px; }
.navbar div h2{
display: inline-block;
}
.navbar div li{ display: inline-block; margin-right: 10px; }
.content{
height: 1000px;
}
.jumbotron{ background: grey; width: 100%; height: 700px;
}
.mulai{ display: inline-block; border: 5px solid black; margin: auto; margin-top: 300px; height: 50px; width: 20%; }
.tutorial{
width: 100%;
height: 2000px;
background-color: #fefefe;
}
.garis{ width: 50%; height: 2000px; border-right: 10px solid black; }
.content .tutorial .cara{ text-align: center; width: 100%; position: relative; } </style> </head> <body> <!-- Navbar --> <div class="navbar"> <div class="block"> <div class="left"> <h2>Tutorial Membuat Sushi</h2> </div> <div class="right"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">About me</a></li> </ul> </div> </div> </div>
&lt;!-- content --&gt;
&lt;div class="content"&gt;
&lt;div class="jumbotron"&gt;
&lt;div class="mulai"&gt;
&lt;a href="#"&gt;Mulai Membuat&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="tutorial"&gt;
&lt;div class="cara"&gt;
&lt;h2&gt;Cara Membuat sushi&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="garis"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- footer --&gt;
&lt;div class="footer"&gt;
&lt;/div&gt;
</body> </html></pre>
<div>coba mas tinggal di kembangin mas<br><br></div>