CSS居中问题大全网页制作必学_html-js-css

概述1.块级元素的垂直居中<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv=…

　　1.块级元素的垂直居中

<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><Meta http-equiv="Content-Type" content="text/HTML; charset=GBK" /><Title>块级元素的垂直居中</Title><style>* {margin:0;padding:0;}body {padding:50px;}pre {padding:8px;border:1px solID #ccc;background:#f2f2f2;Font:11px/150% 'courIEr new',arial;}p {line-height:180%;}ul {List-style:none;}#wrapper {border:1px solID #ccc;wIDth:400px;height:200px;text-align:center;line-height:200px;_Font-size:120px;}#wrapper a {display:-moz-inline-block;display:inline-block;/* zoom:1; */margin:0 auto;wIDth:80px;height:20px;Font:11px/20px arial;background:red;}</style></head><body><h2 ID="main">块级元素的垂直居中</h2><br /><div ID="wrapper"> <a href="http://www.wfuyu.com/" _fcksavedurl="http://www.wfuyu.com/">教程</a> </div><br /><pre>#wrapper {border:1px solID #ccc;wIDth:400px;height:200px;<span style="color:red;">text-align:center;</span><span style="color:red;">line-height:200px;</span>　　<span style="color:gray">// Vertical Align For ie7 & firefox</span><span style="color:green;">_Font-size:120px;</span>　　<span style="color:gray">// Vertical Align For ie6</span>}#wrapper a {<span style="color:blue;">display:-moz-inline-block;</span>　　<span style="color:gray">// For firefox 2(-)</span><span style="color:red;">display:inline-block;</span>　　<span style="color:gray">// For firefox 3 & ie6,对于ie6来说其实相当于zoom:1,仅仅是给elem一个layout。</span>　　　 <span style="color:gray">// 注意：支持display:inline-block的浏览器有：firefox3,Safari,Opera</span><span style="color:blue;">margin:0 auto;</span>　　<span style="color:gray">// For firefox 2(-)</span>wIDth:80px;height:20px;Font:11px/20px arial;background:red;}</pre></body></HTML>
提示：可修改后代码再运行!

以下为引用的内容：
#wrapper {
border:1px solID #ccc;
wIDth:400px;
height:200px;
text-align:center;
line-height:200px;　　// Vertical Align For ie7 & firefox
_Font-size:120px;　　// Vertical Align For ie6
}
#wrapper a {
display:-moz-inline-block;　　// For firefox 2(-)
display:inline-block;　　// For firefox 3 & ie6,仅仅是给elem一个layout。
　　　 // 注意：支持display:inline-block的浏览器有：firefox3,Opera
margin:0 auto;　　// For firefox 2(-)
wIDth:80px;
height:20px;
Font:11px/20px arial;
background:red;
}

总结

以上是内存溢出为你收集整理的CSS居中问题大全网页制作必学全部内容，希望文章能够帮你解决CSS居中问题大全网页制作必学所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1022919.html