Question

我将我的文字与我的图像水平对齐......它实际上是水平对齐的，但是图像会产生一种不是它的错觉。

码（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/

Answer 1

只需将vertical-align: middle; padding: 0;添加到您的.nav-items规则中即可获得跨浏览器的等效结果

Stack snippet

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 2

方法1：

将vertical-align: middle;的{{1}}属性修改为.nav-logo
将属性vertical-align: top;添加到margin-top: 17px;。您可以调整此边距和文字高度属性，直至达到您的满意程度。

jsfiddle：https://jsfiddle.net/sajibche/twpy8eq8/

方法2

另一个动态解决方案：只需对.nav-items和vertical-align: bottom;元素使用.nav-logo。

jsfiddle：https://jsfiddle.net/sajibche/cd52ytch/

Answer 3

尝试在文本

上使用CSS的行高属性

http://www.w3schools.com/cssref/pr_dim_line-height.asp

如果这不起作用，请尝试使用边距或填充进行小幅调整。

Answer 4

您必须放置display: block;才能使其正常运行。然后你可以控制填充和边距。注意：还要在导航栏中添加clearfix类。

updated jsfiddle here

.navbar {
  width: 100%;
  border-bottom: 1px solid #C8C8C8;
  box-shadow: 0 1px 2px #000000;
  position: fixed;
  top: 0;
}

.nav-logo {
  width: 130px;
  height: 58px;
  line-height: 58px;
  display: block;
  float: left;
}

.nav-items {
  display: block;
  float: left;
  height: 58px;
  line-height: 58px;
  padding: 4px 0 0 0;
  box-sizing: border-box;
  background-color: aqua;
}

.nav-item {
  display: inline-block;
  font-size: 20px;
  background: aqua;
}

Css无法水平对齐图像和文本

4 个答案: