html - 图片高于 中的标签

Question

我正在尝试创建包含左侧图像/ Logo 和标签(系统名称)的顶部导航栏。当我添加 Logo 时，结果标签显示得比 Logo 低。我已经定义了 margin-bottom和 margin-top对于 <label> ，它没有用。 logo appear higher .我如何使它看起来像在同一行和相同的大小？

.topnav {
  background-color: #DCF5E1;
  padding: 15px;
  text-align: left;
  overflow: hidden;
}

<div class="topnav">
  <img src="HICOM LOGO.png" style="width:150px;height:100px; margin-left: 30px;"> &nbsp; &nbsp;
  <label style="font-size: 40px; margin-top: 30px;">Cost Optimisation System</label>
</div>

Answer 1

img是行内元素，默认行内元素对齐基线，需要在img上使用vertical-align:middle标签

.topnav {
  background-color: #DCF5E1;
  padding: 15px;
  text-align: left;
  overflow: hidden;
}

img {
  vertical-align: middle
}

<div class="topnav">
  <img src="http://lorempixel.com/150/150/nature/" style="width:150px;height:100px; margin-left: 30px;"> &nbsp; &nbsp;
  <label style="font-size: 30px; margin-top: 30px;">Cost Optimisation System</label>
</div>