我无法将我的文本与我的图像水平对齐...它实际上是水平对齐的,但图像造成了它不是水平对齐的错觉。
代码(CSS):
/* Copyright © 2016 Dynavio Cooperative */
.navbar {
width: 100%;
border-bottom: 1px solid #C8C8C8;
box-shadow: 0 1px 2px #000000;
}
.nav-logo {
width: 130px;
height: 58px;
display: inline-block;
vertical-align: middle;
}
.nav-items {
display: inline-block;
}
.nav-item {
display: inline-block;
font-family: SinkinSansRegular;
font-size: 20px;
}
代码(HTML):
<div class="navbar">
<img src="../images/logo.png" class="nav-logo">
<ul class="nav-items">
<li class="nav-item">Homepage</li>
</ul>
</div>
JsFiddle: https://jsfiddle.net/ha91bzsu/
最佳答案
只需添加vertical-align: middle; padding: 0;
到您的 .nav-items
规则,您将在浏览器中获得相同的结果
堆栈片段
/* Copyright © 2016 Dynavio Cooperative */
.navbar {
width: 100%;
border-bottom: 1px solid #C8C8C8;
box-shadow: 0 1px 2px #000000;
position: fixed;
top: 0;
}
.nav-logo {
width: 130px;
height: 58px;
display: inline-block;
vertical-align: middle;
}
.nav-items {
display: inline-block;
vertical-align: middle;
padding: 0;
}
.nav-item {
display: inline-block;
font-size: 20px;
}
<div class="navbar">
<img src="http://87.92.41.2/logo.png" class="nav-logo">
<ul class="nav-items">
<li class="nav-item">Homepage</li>
</ul>
</div>
关于html - Css 无法水平对齐图像和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36814263/