img在li里居中顯示

如何讓圖片在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基線