Bagaimana untuk memusatkan imej yang ditambahkan pada menu menggunakan HTML CSS?
Saya cuba buat menu seperti gambar di bawah:
Ini yang saya lakukan:
Bagaimana untuk memusatkan item dalam menu dengan gambar? Ini adalah kerja rumah saya dan walaupun saya cuba yang terbaik, saya tidak dapat melakukannya. Terima kasih terlebih dahulu atas bantuan anda.
body {
font-family: Poppins;
background-color: #F5F6F6;
}
.container {
width: 70%;
margin: 0 auto;
}
.top-space {
height: 25px;
}
.navbar ul li {
display: inline;
}
.navbar ul li a {
text-decoration: none;
line-height: 50px;
}
.navbar ul li img {
height: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="./style/reset.css">
<link rel="stylesheet" href="./style/style.css">
</head>
<body>
<div class="container">
<div class="top-space"></div>
<div class="navbar">
<ul>
<li>
<a href=""><img src="./img/logo.png"> </a>
</li>
<li><a href="">adssdaads</a></li>
<li><a href="">adssdaads</a></li>
<li><a href="">adssdaads</a></li>
<li><a href="">adssdaads</a></li>
</ul>
</div>
</div>
</body>
</html>
Saya amat berterima kasih jika anda boleh memberitahu saya cara kod yang anda tulis berfungsi.
