Css 无法将图像与文本水平对齐答案

【问题标题】：Css having trouble aligning image with text horizontallyCss 无法将图像与文本水平对齐
【发布时间】：2016-04-24 18:57:09
【问题描述】：

我在将文本与图像水平对齐时遇到问题...它实际上是水平对齐的，但图像会产生错觉，认为它不是。

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

【问题讨论】：

据我所知，您需要的字体与您在文本图像中看到的字体相同。试试用粗体字，也能解决你的问题
请发布带有实际图像的现场演示（例如 jsfiddle.net）
dynav 的底部似乎与主页文本对齐，您希望它如何对齐？
H 应该与蓝色 io 对齐
这只是一种错觉。如果您希望它看起来水平对齐，那么它不会。在您的情况下，如果您希望它看起来正确，则必须向 .nav-items 添加填充或使 block 和浮动

标签： html css image center vertical-alignment

【解决方案1】：

只需将vertical-align: middle; padding: 0; 添加到您的.nav-items 规则中，您将在不同浏览器中获得相同的结果

堆栈sn-p

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

【讨论】：

【解决方案2】：

方法一：

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

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

方法 2

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

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

【讨论】：

在 ans 中添加小提琴。
这个答案/小提琴确实居中（在 Chrome 中），但我建议你不要使用这样的固定值，因为它会在不同的浏览器中呈现不同（如果缺少选择的字体，甚至更糟可能会发生错位），并且在更改字体大小/系列/粗细时很可能需要进行额外的调整。
@LGSon 添加了动态解决方案。
第二个方法好多了

【解决方案3】：

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

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

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

【讨论】：

通常文本元素（h1、h2、p 等）具有预先确定的边距或填充，使用 Web 浏览器上的检查器查看它们是否具有该属性并将其归零，然后就可以了

【解决方案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;
}

【讨论】：