Image和Ul Li没有内联

Question

我正在设计一个带固定导航栏的酒店网站。我无法将项目与图像项目内联。它变得非常令人沮丧。

这是我的HTML

 <nav id="navigation">
   <ul>
    <li class="left"><a href="rooms.html">Rooms</a></li>
    <li class="left"><a href="dining.html">Dining</a></li>
    <li class="home"><a href="index.html"><img src="assets/navbarimg.png" height="64.5px" weight="250px"></img></a></li>
    <li class="right"><a href="activities.html">Activities</a></li>
    <li class="right"><a href="booking.html">Book a Stay</a></li>
  </ul>
 </nav>

这是我的CSS

#navigation ul {
text-align: center;
position: fixed;
width: 100%;
max-width: 100%;
font-size: 2vh;
font-family: 'Raleway', sans-serif;
z-index: 100;
background-color: rgba(255,255,255,.55);
display: inline-block;
}

#navigation li {
 display: inline-block;
 list-style-type: none;
}

#navigation a {
text-decoration: none;
margin: 0px 75px 0 75px;
color: black;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}

.left {
display: inline;
}

.home {
display: inline;
}

.right {
display: inline;
}

我的代码是超级基本的，所以在这里与我合作。

#navigation ul {
  text-align: center;
  position: fixed;
  width: 100%;
  max-width: 100%;
  font-size: 2vh;
  font-family: 'Raleway', sans-serif;
  z-index: 100;
  background-color: rgba(255, 255, 255, .55);
  display: inline-block;
}

#navigation li {
  display: inline-block;
  list-style-type: none;
}

#navigation a {
  text-decoration: none;
  margin: 0px 75px 0 75px;
  color: black;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
}

.left {
  display: inline;
}

.home {
  display: inline;
}

.right {
  display: inline;
}

<nav id="navigation">
  <ul>
    <li class="left"><a href="rooms.html">Rooms</a></li>
    <li class="left"><a href="dining.html">Dining</a></li>
    <li class="home">
      <a href="index.html"><img src="https://placehold.it/250x65" height="64.5px" weight="250px"></img>
      </a>
    </li>
    <li class="right"><a href="activities.html">Activities</a></li>
    <li class="right"><a href="booking.html">Book a Stay</a></li>
  </ul>
</nav>

Answer 1

我做的实例：https://akainth015.github.io/Inked-Out

通常，您可以使用vertical-align（CSS）对齐。但是， 反直觉。当您使用vertical-align样式时，应用它的元素将成为元素的 rest 的标准。所以，如果你有这个结构：

＆＃13;

＆＃13;

li {
  display: inline-block;
}
ul {
  list-style-type: none;
}

li img {
  vertical-align: middle;
}

＆＃13;

<ul>
  <li>Home</li>
  <li><img src="https://placehold.it/64x64"></li>
  <li>About</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

注意它是如何应用于图像的，而不是中心所需的文本。祝你好运！