Question

我试图将我的图像置于两个UL标签之间，但它没有按照我的意愿运行。我试过这个网站上的各种来源，我找不到一个专门解答这个问题的答案。

＆＃13;

* {
  margin: 0;
}
body {
  background-color: #FFD4DB;
}
#navbar {
  height: 55px;
  width: 80%;
  top: 5px;
  position: absolute;
  left: 10%;
  right: 10%;
  border-radius: 2px;
  color: #FF405E;
  text-align: center;
  border-bottom: 3px solid #9B5E68;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9baa+31,ffadae+93 */
  background: #ff9baa;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ff9baa 31%, #ffadae 93%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ff9baa 31%, #ffadae 93%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ff9baa 31%, #ffadae 93%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff9baa', endColorstr='#ffadae', GradientType=0);
  /* IE6-9 */
}
#navbar > ul li {
  list-style-type: none;
  display: inline;
  margin-left: 10px;
}
#navbar > ul > li > a {
  text-decoration: none;
  line-height: 55px;
  color: #9B5E68;
}
#lgo {
  width: 100px;
  height: 100px;
}

＆＃13;

<body>
  <nav id="navbar">
    <ul>
      <li><a href="#">Ipsum</a>
      </li>
      <li><a href="#">Lorem</a>
      </li>
      <li><a href="#">Ipsum</a>
      </li>
    </ul>
    <img id="lgo" src="http://i.imgur.com/niYdlBv.png">
    <ul>
      <li><a href="#">Lorem</a>
      </li>
      <li><a href="#">Ipsum</a>
      </li>
      <li><a href="#">Lorem</a>
      </li>
    </ul>

＆＃13;

Answer 1

我为你准备好了！

我添加了所有ul的属性。

#navbar ul {
    display: inline-block;
    position: relative;
    padding: 0px 10px;
}

然后我在HTML文件中改了一下。在图片所在的中间，请粘贴：

<ul>
    <img id="lgo" src="http://i.imgur.com/niYdlBv.png">
</ul>

是的，现在将其添加到#lgo：

#lgo {
    height: 55px;
    vertical-align: middle;
}

希望我能帮到你！

Here's the Pen!

在导航栏中居中图像，同时保持100％的导航栏宽度

1 个答案: