如何在李中心的形象

Question

我在li元素中居中图像有问题。 我在html中有这个代码

<nav role="navigation">
    <ul class="main-nav">
      <li><a href=home.html>Home</a></li>
      <li><a href=world.html>World</a></li>
      <li><a href=sport.html>Sport</a></li>
      <li><a href=lifestyle.html>Lifestyle</a></li>
      <li><a href=health.html>Health</a></li>
      <li><a href=fashion.html>Fashion</a></li>
      <li><a href=technology.html>Technology</a></li>
      <li><a href=postpage.html>Post & Pages</a></li>
      <li><img src="images/all/magnifier.png" alt="icon for search box"/></li>
    </ul>
  </nav>

和css中的这段代码

nav {
clear: both;
}
.main-nav {
list-style-type: none;
float: left;
border: 1px solid Gainsboro;
width: 100%;
height: 50px;
}
.main-nav li {
float: left;
font-size: 12px;
}
.main-nav li:last-child{
float: right;
border-left: 1px solid Gainsboro;
height: 50px;
width: 50px;
}
.main-nav li a {
display: block;
text-decoration: none;
color: #8a8a8a;
display: block;
padding: 17px 30px;
}
.main-nav li a:hover {
background-color: #02a5e0;
color: white;
}
.main-nav li img {
display: block;
margin: 0 auto;
}

所以，当我添加

时，我需要将图像置于其框中

display: block;
margin: 0 auto;

图像仅向右移动，但未向下移动。

我需要的图片

Answer 1

尝试将此课程添加到您的

.has-image-centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align:center;
}

Answer 2

尝试将display:flex添加到您希望图片居中的<li>。然后添加justify-content: center;，align-items: center;和flex-direction: column;

这应该有用！

Answer 3

使用flex-box。

display: flex;
align-items: center;

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

添加到.main-nav li:last-child img以解决问题

nav {
clear: both;
}
.main-nav {
list-style-type: none;
float: left;
border: 1px solid Gainsboro;
width: 100%;
height: 50px;
}
.main-nav li {
float: left;
font-size: 12px;
}
.main-nav li:last-child{
border-left: 1px solid Gainsboro;
height: 50px;
width: 50px;
margin:0 10px;

}
.main-nav li:last-child img{margin-top:10px}
.main-nav li a {
display: block;
text-decoration: none;
color: #8a8a8a;
display: block;
padding: 17px 30px;
}
.main-nav li a:hover {
background-color: #02a5e0;
color: white;
}
.main-nav li img {
display: block;
margin: 0 auto;
}

<nav role="navigation">
    <ul class="main-nav">
      
      <li><a href=home.html>Home</a></li>
  <li><a href=world.html>World</a></li>
  <li><a href=sport.html>Sport</a></li>
  <li><a href=lifestyle.html>Lifestyle</a></li>
  <li><a href=health.html>Health</a></li>
  <li><a href=fashion.html>Fashion</a></li>
  <li><a href=technology.html>Technology</a></li>
  <li><a href=postpage.html>Post & Pages</a></li>
      <li><img src="https://lh6.googleusercontent.com/-kUA-QmkzBXQ/AAAAAAAAAAI/AAAAAAAAAUE/M4iO6wJL4e0/photo.jpg?sz=32" alt="icon for search box"/></li>
    </ul>
  </nav>