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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Apa yang saya akan lakukan ialah
display flex给所有导航菜单项的包装，在本例中为ul。然后使用align-content: centertengahkan item senarai secara menegak.body { font-family: Poppins; background-color: #F5F6F6; } .container { width: 70%; margin: 0 auto; } .top-space { height: 25px; } .navbar ul { display: flex; align-content: center; } .navbar ul li { display: inline; } .navbar ul li a { text-decoration: none; line-height: 50px; } .navbar ul li img { height: 50px; width: 50px; }Semoga ini membantu. Jika anda tidak memberitahu saya, saya akan menyiasat lebih lanjut.
Anda mesti menambah
display:flex;seperti yang ditunjukkan di bawah:.navbar ul{display:flex;}