img在li里居中显示

Posted 2021-03-08 wjsblog

如何让图片在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 ;
}

 

涉及知识点如下：

inline-block：行内块元素
           特点：极具有块状元素的特点，又有内联元素的特点
           特点：inline-block  支持 使用垂直对齐的属性/*vertical-align: top/middle/bottom/baseline*/
           注：行内块元素，也是属于内联元素。

 vertical-align: top 上/middle  中/bottom 下/baseline基线