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

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

尝试在文本上使用 CSS 的行高属性

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

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

Answer 2

您必须输入 display: block; 才能使其正常工作。然后你可以控制填充和边距。注意：还要在导航栏中添加一个 clearfix class。

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

Answer 3

方法一：

将.nav-logo的vertical-align: middle;属性修改为vertical-align: top;
在.nav-items上加一个属性margin-top: 17px;。您可以调整此边距和文字高度属性直到您满意为止。

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

方法二

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

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

Answer 4

只需将 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>

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

Css having trouble aligning image with text horizontally

html

css

image

center

vertical-alignment