如何垂直對齊導航欄的鏈接？

Question

我試圖做一個導航欄，但我不知道怎么排隊的li和a垂直的標簽。 我怎樣才能做到這一點？

 #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

如今，常見的方法之一就是使用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>