Div+Css教程模板無(wú)憂>建站教程>Div+Css教程>DIV+CSS實(shí)例>

CSS如何實(shí)現(xiàn)單行圖片與文字垂直居中？_DIV+CSS實(shí)例

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

　　今天又在群中看到一些朋友問(wèn)單行圖片文字垂直居中問(wèn)題了，于是寫(xiě)了這篇文章．
　　這個(gè)問(wèn)題是在做頁(yè)面中經(jīng)常會(huì)碰到的問(wèn)題，首行我們先看一下最基礎(chǔ)的的吧！
　　以下選自（CSS權(quán)威指南）

示例代碼 [m.dounai2.com]

vertical-align
初始值：　baseline（缺省值）
可否繼續(xù)：否
適用于：　內(nèi)聯(lián)元素
說(shuō)明：vertical-align:baseline使元素的基線同父元素的基線對(duì)齊．
警告：vertical-align不能影響表格單元中的內(nèi)容的對(duì)齊，對(duì)于塊元素中的內(nèi)容也一樣．

　　文字不多，但時(shí)常有人范錯(cuò)誤，有人說(shuō)我用了為什么沒(méi)有效果呢？首行看一下他的代碼．

示例代碼 [m.dounai2.com]

．style{vertical-align:middle;.....}
HTML:<div class="style"><img src="地址" />...<div>

　　分析：從上面的代碼可以看出錯(cuò)誤就是把樣式應(yīng)用在塊元素中了
　　我們只需要改樣式為

示例代碼 [m.dounai2.com]

．style img{vertical-align:middle;.....}

　　假如STYLE中有其它如INPUT或其它內(nèi)聯(lián)元素可寫(xiě)成

示例代碼 [m.dounai2.com]

．style img,.style.input{vertical-align:middle;.....}
或．style *{vertical-align:middle;.....}/*在不影響其它元素的情況下使用這個(gè)通配符*/

　　以上是在沒(méi)有設(shè)置高度／行高的事情下，假如加入了高度和行高的事情下FF可以支持，IE6以下則不完全支持，看以下測(cè)試結(jié)果．（為了增加明顯的效果對(duì)圖片適當(dāng)增加了高度）

代碼調(diào)試框 [m.dounai2.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>單行圖文并排垂直居中</title>
<style type="text/css">
.text{
	margin:5px 0 15px 0}
}
.mid{
	line-height:50px;
	background-color:#CCCCCC;
} 
.mid3{
	height:50px;
	background-color:#CCCCCC;
} 
.mid2{
	line-height:50px;
	height:50px;
	background-color:#CCCCCC;
}  
.va_m img{
	vertical-align:middle;
}
</style>
</head>

<body>
<div style="background-color:#CCCCCC;">無(wú)樣式和圖片</div>
<div   id="oo088aw"   class="text">說(shuō)明：</div>
<div style="background-color:#CCCCCC;">無(wú)樣式有圖片<img src="http://p1.mb5u.com/divcss/level3.gif" width="37" height="40"/></div>
<div   id="eqg0ca0"   class="text">說(shuō)明：</div>
<div   id="cee0k0m"   class="mid3">只有height</div> 
<div   id="wik0ay0"   class="text">說(shuō)明：</div>
<div   id="mccmkoy"   class="mid3">有height有圖片<span style="background-color:#CCCCCC;"><img src="http://p1.mb5u.com/divcss/level3.gif" width="37" height="46"/></span></div> 
<div   id="uiu0omm"   class="text">說(shuō)明：</div>
<div   id="iwkuyca"   class="mid">只有l(wèi)ine-height</div> 
<div   id="mmyw0o0"   class="text">說(shuō)明：</div>
<div   id="mq00cee"   class="mid">有l(wèi)ine-height和圖片<img src="http://p1.mb5u.com/divcss/level3.gif" width="37" height="30"/></div>
<div   id="0yymaom"   class="text">說(shuō)明：</div>
<div   id="wwug8u0"   class="mid2">有l(wèi)ine-height又有高度的情況</div> 
<div   id="aoy008q"   class="text">說(shuō)明：</div>
<div   id="g0cmmoa"   class="mid2">有l(wèi)ine-height和圖片的情況<img src="http://p1.mb5u.com/divcss/level3.gif" width="37" height="48"/></div> 
<div   id="aqaywwk"   class="text">說(shuō)明：</div> 
<h2>在上面測(cè)試基礎(chǔ)中對(duì)圖片加入vertical-align:middle;</h2>
<div   id="0aomomm"   class="va_m">
<div style="background-color:#CCCCCC;">無(wú)樣式和圖片</div>
<div   id="oaomm0s"   class="text">說(shuō)明：</div>
<div style="background-color:#CCCCCC;">無(wú)樣式有圖片<img src="http://p1.mb5u.com/divcss/level3.gif" width="37" height="12"/></div>
<div   id="00q0om8"   class="text">說(shuō)明：</div>
<div   id="kkuuuu0"   class="mid3">只有height</div> 
<div   id="geesseg"   class="text">說(shuō)明：</div>
<div   id="qs80g0g"   class="mid3">有height有圖片<span style="background-color:#CCCCCC;"><img src="http://p1.mb5u.com/divcss/level3.gif" width="37" height="12"/></span></div> 
<div   id="waayaoy"   class="text">說(shuō)明：</div>
<div   id="a8giwkm"   class="mid">只有l(wèi)ine-height</div> 
<div   id="ooywugi"   class="text">說(shuō)明：</div>
<div   id="moaaooe"   class="mid">有l(wèi)ine-height和圖片<img src="http://p1.mb5u.com/divcss/level3.gif" width="37" height="12"/></div>
<div   id="cus0o0g"   class="text">說(shuō)明：</div>
<div   id="ocegee0"   class="mid2">有l(wèi)ine-height又有高度的情況</div> 
<div   id="iuis0ay"   class="text">說(shuō)明：</div>
<div   id="g0m080c"   class="mid2">有l(wèi)ine-height和圖片的情況<img src="http://p1.mb5u.com/divcss/level3.gif" width="37" height="30"/></div> 
<div   id="0iesggg"   class="text">說(shuō)明：</div>
</div> 
</body>
</html>

[ 可先修改部分代碼再運(yùn)行查看效果 ]

總結(jié)：對(duì)于單行圖片文字垂直居中（有圖片的情況下）
　　1.當(dāng)沒(méi)有高度行高時(shí)，我們只要簡(jiǎn)單的對(duì)內(nèi)聯(lián)元素應(yīng)用vertical-align:middle;就可以了．此外對(duì)于一個(gè)圖片和文字的高度相差無(wú)幾的，不用這個(gè)樣式也是可以的．
　　2.對(duì)于有行高或有行高＋高度的,FF可以正確顯示,ie6失效．所以也只能對(duì)IE6以下版本使用KACK了！，現(xiàn)在IE7已經(jīng)改正了這個(gè)錯(cuò)誤．
　　3．對(duì)2補(bǔ)充一下，可以用不定高度，用上下補(bǔ)白的方法，這樣就可以兼容IE6了。