Je suivais un tutoriel YouTube et j'ai écrit exactement le même code mais je n'arrive pas à aligner mon logo avec la navigation comme le leur
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
display: flex;
align-items: center;
padding: 20px;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
a {
text-decoration: none;
color: #555;
}
p {
color: #555;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> STUDENT HUB </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<div class="logo">
<img src="image/logo.png" width="125px" alt="this is an image">
</div>
</div>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Commu</a></li>
<li><a href="">Report</a></li>
<li><a href="">Help </a></li>
<li><a href="">Account</a></li>
</ul>
</nav>
</body>
</html>
J'ai essayé d'utiliser Vertical-align: center et Display: inline-block sous le sélecteur de la barre de navigation mais cela n'a pas fonctionné non plus
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous devez mettre
nav标记放入navbardans un div.* { margin: 0; padding: 0; box-sizing: border-box; } .navbar { display: flex; align-items: center; padding: 20px; } nav { flex: 1; text-align: right; } nav ul { display: inline-block; list-style-type: none; } nav ul li { display: inline-block; margin-right: 20px; } a { text-decoration: none; color: #555; } p { color: #555; }