显示文字和图像内嵌在一起

Question

我已经搜索过，我无法找到解决方案。我在我的导航（我的徽标）中添加了一个图像，它将文本向下推到图像下方，而不是显示内联。我该如何解决这个问题？

以下是导航的CSS：

header.container>.container--content>.container--navigation>li>a {
  padding-left: 20px;
  font-size: 13px;
  text-transform: uppercase;
  color: #1E7194;
  transition: 0.25s;
}

这是HTML。

<header class="container">
<div class="container--content vertical center">
  <div class="container--navigation">
    <li><a id='1' href="#">Home</a></li>
    <li><a href="#">About Me</a></li>
    <img src="logo.png">
    <li><a href="#">Contact Me</a></li>
    <li><a href="#">Portfolio</a></li>
  </div>
</div>
</header>

如何让这两个元素显示为内联？

Answer 1

将图片包装到<li>：

<li><img src="logo.png"></li>

从CSS中删除此样式：

header.container {
    height: 10%;
}

如果需要，请调整徽标的位置。

Answer 2

有几种方法可以做到这一点。 One solution：

header.container>.container--content>.container--navigation>li>* {
  vertical-align: middle;
}

HTML：

<div class="container--navigation">
  <li><a id="1" href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><img src="http://dummyimage.com/90x90/000/fff"></li>
  <li><a href="#">Contact Me</a></li>
  <li><a href="#">Portfolio</a></li>
</div>

查看结果图像

Answer 3

你可以设置一些适当的负值和位置相对值，但这可能会从底部产生一些差距，请参阅此quiz site推荐部分，它会显示相同的内容。