设置字体: 小中大

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="Content-Type" content="text/html; charset=utf-8" /> <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="">BTN</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>

提示：你可以先修改部分代码再运行。

八月 14th, 2009 in (x)Html/Css | tags: css, 居中, 技巧 | 1,118 次浏览 | 1 Comment

此页面上的内容需要较新版本的 Adobe Flash Player。

He Min Blog 每一步细节注定你将来的命运。

CSS居中问题

Webmaster

Category

Tag Cloud

Recent Article

Random Pages

Recent Comments

Gallery

Pigeonhole

Links

Tunnel

Translation

访问者分析