如何使图像在列表项中居中？

Question

如何使房子居中以与文本 Home 对齐？

<nav class="main-nav nav">
  <img src="img/logopng.PNG" class="nav-img">
  <ul>
    <li class="align-li-nav">
      <img src="img/house_48px.png" class="nav-li-img"><a href="" class="nav-text">Home</a>
    </li>

Answer 1

ul { list-style: none; }

ul li { 
display: flex; 
align-items: center;
}

ul li img { max-width: 50px; height: auto; }

<ul>
<li><img src="https://static.thenounproject.com/png/77002-200.png" /><a href="#">Home</a>
</ul>

li { 
   display: flex;
   align-items: center;
}

您可能需要放置 display: block;在 a 标签上，但应该有效

Answer 2

您可以使用 Flexbox 来做到这一点。

.align-li-nav {
  display: flex;
  align-items: center;
}

https://www.w3schools.com/css/css3_flexbox.asp

flexboxfroggy.com 是学习如何使用 Flexbox 的好游戏

如何使图像在列表项中居中？

How can I center the image in the list item?

html

css

css-position