DIV 上下居中用 line-height
Html代碼
<style type=”text/css”>
div.v-align {line-height: 200px;height: 200px;border: 1px solid red;}
</style>
<div class=”v-align”>垂直居中</div>
清除瀏覽器默認(rèn)樣式
1.用其他有名的庫來清除(如:YUI)
2.自已清除 如:
* {padding: 0;margin:0;}
讓A支持所有瀏覽器
Html代碼
<style type=”text/css”>
a.agideo:link, a.agideo:visited {font-weight: bold;text-decoration: none;color: green;}
a.agideo:hover, a.agideo:active {font-weight: bold;text-decoration: none;color: red;}
</style>
<a href=”http://www.agideo.com” class=”agideo”>捷道數(shù)碼</a>
<style type=”text/css”>
a.google:hover, a.google:active {font-weight: bold;text-decoration: none;color: red;}
a.google:link, a.google:visited {font-weight: bold;text-decoration: none;color: green;}
</style>
<a href=”http://www.google.com” class=”google”>Google</a>
A 偽類定義順序記憶法
LoVe:HAte(愛恨)
IMG vertical-align
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
baseline :默認(rèn)值。將支持 valign 特性的對象的內(nèi)容與基線對齊
sub 垂直對齊文本的下標(biāo)
super 垂直對齊文本的上標(biāo)
top : 將支持 valign 特性的對象的內(nèi)容對象頂端對齊
text-top : 將支持 valign 特性的對象的文本與對象頂端對齊
middle : 將支持 valign 特性的對象的內(nèi)容與對象中部對齊
bottom : 將支持 valign 特性的對象的內(nèi)容與對象底端對齊
text-bottom : 將支持 valign 特性的對象的文本與對象頂端對齊
length : 由浮點數(shù)字和單位標(biāo)識符組成的長度值 | 百分?jǐn)?shù)。可為負(fù)數(shù)。定義由基線算起的偏移量。基線對于數(shù)值來說為0,對于百分?jǐn)?shù)來說就是0%。請參閱 長度單位。目前IE尚未實現(xiàn)此參數(shù)
Html代碼
<style type=”text/css”>
div.v-align {border: 1px solid red;line-height: 40px;float: left;font-size: 11px;height: 40px;}
div.v-align img.only-img {float:left;}
div.v-align.has-img {padding-top: 10px;height: 30px;}
div.v-align.has-img-and-text img.has-text {
vertical-align: -4px !important;vertical-align: middle;margin-top: -3px !important;margin-top: 0px;}
div.v-align.has-img-and-text {
padding-top: 0px !important;padding-top: 10px;height: 40px !important;height: 30px;}
</style>
<div class=”v-align”>正常</div>
<div class=”v-align has-img”><img src=”http://huoche.7234.cn/images/jb51/no3svwg4l1x.png” class=”only-img” /></div>
新聞熱點
疑難解答