img在li里居中显示

标签：基线   center   使用   div   接下来   top   元素   行高   自身   

如何让图片在li里进行水平垂直居中显示？

1.首先，我们应该在列表中插入图片，html代码如下

<ul>

               <li>
                     <img src="img_zoujin/rightImg.gif"/>
               </li>
                <li>
                     <img src="img_zoujin/rightImg.gif"/>
               </li>
      

</ul>

2.让图片在同一排显示，需要给li添加左浮动

3.给li添加宽高（li是块状元素，可以直接定义自身的宽高）

4.接下来就是关键步骤

   （1）给li设置text-align:center;使图片水平居中

   （2）给li设置行高等于高度

            给图片img的元素类型设置为inline-block（display:inline-block)

            给图片设置vertical-align:middle;

           以上步骤可以使图片垂直居中

全部CSS代码如下：

ul li{
      width: 171px;

      height: 62px;

      border: 1px solid #d3d3d3;
      text-align: center;
      line-height: 62px;
}
ul li img{
     display: inline-block;
     vertical-align:middle ;
}

涉及知识点如下：

img在li里居中显示

标签：基线   center   使用   div   接下来   top   元素   行高   自身   

原文地址：https://www.cnblogs.com/wjsblog/p/12350005.html