如何在li元素中居中图片？求助解决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"><img src="fashion-icon.png" alt="Fashion"></a></li>
  </ul>
</nav>

第二步：用CSS实现图片居中 #

方法一：Flex布局（推荐，现代且灵活） #

Flex布局是目前实现居中最方便的方式，不管是水平还是垂直居中都能轻松搞定：

.main-nav {
  /* 先给ul清除默认样式，避免列表自带的padding影响布局 */
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 如果你的导航是横向排列的话，给ul加这个 */
}

.main-nav li {
  display: flex;
  justify-content: center; /* 水平居中图片/文字 */
  align-items: center; /* 垂直居中图片/文字 */
  /* 给每个li设置合适的宽高，让图片有足够的展示空间 */
  width: 120px;
  height: 60px;
}

.main-nav li img {
  /* 限制图片最大宽高，防止溢出li容器 */
  max-width: 90%;
  max-height: 90%;
}

方法二：Text-align + 垂直对齐（兼容旧浏览器） #

如果你需要兼容一些比较老的浏览器，这种方法也能生效：

.main-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 横向导航需要这个 */
}

.main-nav li {
  text-align: center; /* 让行内元素（图片）水平居中 */
  width: 120px;
  height: 60px;
  line-height: 60px; /* 让文字垂直居中，配合图片的vertical-align */
}

.main-nav li img {
  vertical-align: middle; /* 让图片和文字垂直对齐 */
  max-width: 90%;
  max-height: 90%;
}

注意事项 #

• 确保图片的src路径正确，不然图片会显示不出来
• 如果你的导航是纵向排列的，只需要去掉.main-nav里的display: flex即可
• 可以根据自己的需求调整li的宽高、图片的最大尺寸，适配你的页面设计

内容的提问来源于stack exchange，提问作者Vojta Matras