我正在尝试制作一个导航栏,但我不确定如何垂直排列 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>
最佳答案
如今一种常见的方法是使用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>
关于html - 如何垂直对齐导航栏的链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47123326/