對於初學css的新手朋友來說，經常會遇到這樣一個問題，當文字和圖片出現在同一行或者同一個div里面的時候，在瀏覽器中運行出來的顯示效果往往是在不同的行，那么，我們怎么才能利用CSS代碼使圖片和文字在同一行顯示且對齊呢？
對於這種現象，方法有3種：
1、通過添加css的“vertical-align:middle;”；
2、如果圖片是背景圖片，可以在css中設置背景圖片，然后設置文字的padding屬性；
3、把文字和圖片分別放入不同的div中。
經過多次的測試，上面三種方法都可以讓圖片和文字在同一行顯示，下面馬海祥就用實例來為大家操作一下：
1、在css中給div添加上“vertical-align:middle”屬性
有些朋友會發現，如果一行內容中有圖片有文字的話，文字往往會自動的底部對齊，影響美觀，那如何讓它們相對於垂直居中呢，很簡單，就是在圖片和文字所在的行中添加CSS屬性：vertical-align:middle；這樣，它們在同一行就會垂直居中對齊了。
在此，馬海祥就用“注冊、登陸、找回密碼”這個在實際運用中經常遇到的情況還做實例，把“注冊”和“登陸”做成圖片，“找回密碼”設置成文字。
html代碼如下：
<div id="denglu">
<img src="reg.gif">
<img src="login.gif">
<a href="#">找回密碼</a>
</div>
css代碼如下:
#denglu *{
vertical-align:middle; /* 居中對齊， */
font-size:14px;
}
在瀏覽器中運行后的效果圖如下：
使用css的“vertical-align:middle”屬性讓圖片和文字在同一行對齊是一種非常常用的方法，也是比較利於代碼優化和精簡的一種方法（具體可查看馬海祥博客《網站CSS代碼優化的7個原則》的相關介紹），希望大家可以掌握。
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中
下面說下最后一種方法，分別把圖片和文字放入不同的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;
}
在瀏覽器中運行以后，你會發現，這個方法也可以讓圖片和文字在同一行顯示，但是看起來好像麻煩了一點，所以個人還是比較推薦第一種方法的。
馬海祥博客點評：
隨着瀏覽器種類的不斷增加，你會發現我們的網站時常會出現這樣或那樣的兼容問題，這就需要我們在網站制作的初期就嚴格的規范好網站的代碼，以免在以后的運營過程中再次修改網站的代碼。
本文為馬海祥博客原創文章，如想轉載，請注明原文網址摘自於http://www.mahaixiang.cn/css/1149.html，注明出處；否則，禁止轉載；謝謝配合！