“vertical-align:middle” 對display:inline-block有用

一般應用：圖示  文字 一行顯示，文字多的，圖示和文字居中顯示的

.s-li{width:100%;font-size:0px;}

.s-i{display:inline-block;

        height:43px;//圖片的高度

        width:18%;

                     vertical-align: middle;

    background:url(圖片) center no-repeat;

}

s-div{

1.    display: inline-block;
       vertical-align: middle;
       width: 82%;
   
2. font-size:1rem;
3. }

<li class="s-li">

<i class="s-i"></i>

       <div class="s-div">文字等</div>

</li>

1、在css中給div新增上“vertical-align:middle”屬性

<div id="denglu"> 
<img src="reg.gif"> 
<img src="login.gif"> 
<a href="#">找回密碼</a> 
</div> 

css程式碼： 

複製程式碼 程式碼如下:
#denglu *{ 
vertical-align:middle; /* 居中對齊， */ 
font-size:14px; 
} 

2、把圖片設定為背景圖片

如果我們的圖片本身是一個背景圖片的話，可以在css中使用“background”來設定該圖片，然後設定文字的padding屬性就可以使他們在同一行顯示了，html程式碼如下： 

<div id="denglu"> 
<div id="zhaohuimima"><a href="#">找回密碼</a></div> 
</div> 

css程式碼： 

複製程式碼 程式碼如下:
#denglu { 
background:url(login.gif) no-repeat left center; 
} 
#zhaohuimima{ 
font-size:14px; 
padding-left:50px;}  我們在css中設定了背景圖片，然後又設定了文字的padding-left屬性，這樣，圖片和文字就在同一行顯示了，執行結果就不切圖了，你可以自己試一下。

3、下面說下最後一種方法，分別把圖片和文字放入不同的div中，然後用“margin”屬性進行定位，就可以使他們顯示在同一行了，html程式碼如下

程式碼如下:
<div id="denglu"> 
<div id="zhuce"> <img src="reg.gif"/> 
<div id="zhaohuimima"><a href="#">找回密碼</a></div> 
</div> 

css程式碼如下： 

複製程式碼 程式碼如下:
#zhaohuimima{ 
font-size:14px; 
margin-top:-16px; 
padding-left:50px;} 

推薦第一種方法的。