如何垂直对齐导航栏的链接？

Question

I am trying to make a navigation bar but I'm not sure how to line up the li and a tags vertically. How can I do this?

 #navbar { font-weight: bold; display: block; background-color: #000; } li { float: left; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #000; } li a { color: white; vertical-align: middle; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } 

 <div id="navbar"> <ul> <li><img src="img/logo.png" width="75" height="75"></li> <li><a href="#">HOME</a></li> <li><a href="#">MY WORK</a></li> <li><a href="#">HIRE ME</a></li> <li><a href="#">PROJECTS</a></li> </ul> </div> 

Answer 1

One of the common ways nowadays is to do it with the Flexbox :

 #navbar { font-weight: bold; display: block; background-color: #000; } ul { display: flex; /* displays flex-items (children) inline */ align-items: center; /* centers them vertically */ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #000; } li { float: left; } li a { color: white; vertical-align: middle; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } /* addition */ img {display: block} /* or: "vertical-align: middle" // removes bottom margin/whitespace */ 

 <div id="navbar"> <ul> <li><img src="https://placehold.it/100x100" alt="" width="75" height="75"></li> <li><a href="#">HOME</a></li> <li><a href="#">MY WORK</a></li> <li><a href="#">HIRE ME</a></li> <li><a href="#">PROJECTS</a></li> </ul> </div>