html - 一起显示内联的文本和图像

Question

找了又找，没找到解决办法。我在我的导航(我的 Logo )中添加了一个图像，它将文本向下推到图像下方，而不是内联显示。我该如何解决？

这是导航的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

有几种方法可以做到这一点。 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>

查看结果图片