Question

I'm trying to make an image stuck to the left side on the same height. However, it just won't work. The image is smaller in my actual version of the code bhut that shouldn't affect the output. Here's my code.

#nav {
  text-align: center;
  background: #b7b7b7;
}

#nav li {
  display: inline-block;
  padding: 12px;
}

#nav li:hover {
  background: #662282;
}

#nav li.app {
  background: #f28a24;
}

#nav li.home {
  background: #662282;
}

#nav a {
  color: white;
  font-family: gillsans-light;
  font-size: 16px;
}

<!-- image here -->
#nav img {
  vertical-align: middle;
}

<div id="nav">
  <a href="http://www.#.com"> <img src="https://cdn4.iconfinder.com/data/icons/black-icon-social-media/512/099310-feedburner-logo.png">
    <ul>
      <li class="home"><a href="http://www.#.com/#home">Home</a></li>
      <li class="cloud"><a href="http://www.#.com/cloud">Cloud</a></li>
      <li class="color"><a href="http://www.#.com/#color">Color</a></li>
      <li class="features"><a href="http://www.#.com/features">Features</a></li>
      <li class="tools"><a href="http://www.#.com/#tools">Tools</a></li>
      <li class="solutions"><a href="http://www.#.com/solutions">Solutions</a></li>
      <li class="about"><a href="http://www.#.com/about-us">About us</a></li>
      <li class="contact"><a href="http://www.#.com/contact">Contact</a></li>
      <li class="app"><a href="http://app.#.cloud/">APP</a></li>
    </ul>
</div>

UPDATED TO INCLUDE TEST IMAGE

Answer 1

我运行了您的代码，看看我是否可以复制该问题，但如果我正确地阅读您的问题，看起来一切都按照您的意愿运行：view fiddle

我用谷歌图片中的随机徽标替换了您的图片网址，这样我就可以尝试使用图片了。

text-align: center所拥有的CSS规则#nav正确地使您的图像居于中心。

我注意到的一件事是你没有关闭<a>标签：

<div id="nav">
    <a href="http://www.#.com"> <img src="http://#.com/wp-content/uploads/2017/06/logo.png">

但是，更改此设置不会影响页面的样式。

修改解决方案基于OP的评论如下：

View updated fiddle

为了实现您的目标，一种解决方案是将图像作为第一个列表项包含在内，以便它属于导航链接的流程：

<li> <a href="http://www.#.com"> <img src="https://cdn4.iconfinder.com/data/icons/black-icon-social-media/512/099310-feedburner-logo.png"> </a> </li>

Make image stick to list in center of webpage

1 个答案: