skodev mascot typing keyboard

SKO.DEV

sekolah koding rasa baru
icon gambar buku BELAJAR icon gambar pohon KOMUNITAS icon gambar buku ARTIKEL icon gambar masuk MASUK

Postingan lainnya

Kelas Premium!
Belajar bikin website dari nol sekarang

cover kelas HTML dan CSS

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

html css
avatar yudayuda
@yudayuda

8 Kontribusi 4 Poin

Diperbarui 3 tahun yang lalu

Tanggapan

Mungkin karena inline-block

2 Jawaban:

Jawaban Terpilih

<pre>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;title&gt;Tutorial Sushi&lt;/title&gt; &lt;style&gt;

  • { 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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- Navbar --&gt; &lt;div class="navbar"&gt; &lt;div class="block"&gt; &lt;div class="left"&gt; &lt;h2&gt;Tutorial Membuat Sushi&lt;/h2&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;ul class="menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Tutorial&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;About me&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

&amp;lt;!-- content --&amp;gt;
&amp;lt;div class=&quot;content&quot;&amp;gt;
	&amp;lt;div class=&quot;jumbotron&quot;&amp;gt;
		&amp;lt;div class=&quot;mulai&quot;&amp;gt;
			&amp;lt;a href=&quot;#&quot;&amp;gt;Mulai Membuat&amp;lt;/a&amp;gt;
		&amp;lt;/div&amp;gt;
	&amp;lt;/div&amp;gt;


	&amp;lt;div class=&quot;tutorial&quot;&amp;gt;
		&amp;lt;div class=&quot;cara&quot;&amp;gt;
			&amp;lt;h2&amp;gt;Cara Membuat sushi&amp;lt;/h2&amp;gt;
		&amp;lt;/div&amp;gt;
		&amp;lt;div class=&quot;garis&quot;&amp;gt;
			
		&amp;lt;/div&amp;gt;
	&amp;lt;/div&amp;gt;

&amp;lt;/div&amp;gt;

&amp;lt;!-- footer --&amp;gt;
&amp;lt;div class=&quot;footer&quot;&amp;gt;
	
&amp;lt;/div&amp;gt;

&lt;/body&gt; &lt;/html&gt;</pre>

avatar Masikhsan
@Masikhsan

15 Kontribusi 7 Poin

Dipost 3 tahun yang lalu

<div>coba mas tinggal di kembangin mas<br><br></div>

avatar Masikhsan
@Masikhsan

15 Kontribusi 7 Poin

Dipost 3 tahun yang lalu

Login untuk ikut Jawaban