CSS居中问题大全网页制作必学

发布时间：2018-08-27 22:17:13 所属栏目：经验来源：站长网

导读：1.块级元素的垂直居中 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtdhtml xmlns=http://www.w3.org/1999/xhtml xml:lang=enheadmeta http-equiv=Content-Type content=text/html; charset=GBK

　　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> <div id="wrapper"> <a href="http://www.veryhuo.com/" _fcksavedurl="http://www.veryhuo.com/">烈火教程</a> </div> <pre> #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, 对于IE6来说其实相当于zoom:1, 仅仅是给elem一个layout。 　　　 // 注意：支持display:inline-block的浏览器有：Firefox3,Safari,Opera margin:0 auto;　　// For Firefox 2(-) width:80px; height:20px; font:11px/20px arial; background:red; } </pre> </body> </html>
提示：可修改后代码再运行!

（编辑：老爷爷站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

对于元宇宙，大佬们是	中国互联网的新一轮机
创业35年，黄光裕依旧	格力的空调围城

CSS居中问题大全 网页制作必学

CSS居中问题大全网页制作必学