HTML+CSS垂直居中其实很简单
作者：佳明妈 来源：jquery 图片特效 2009-11-21 人气：注意：
1、因为a标签是行元素，必须用display:block;把他变成块级元素，同理其他行级标签也是如此
在起作用。
2、height:2em; line-height:2em; 必须制定在要垂直居中的直接父级标签，比如这
一、一行文本的垂直居中 查看演示
说明： ul li a{} 中的
width:100%;
height:2em;
line-height:2em;
display:block;
在起着主要作用，其他的多为装饰和方便演示看效果用过的。
注意：
1、因为a标签是行元素，必须用display:block;把他变成块级元素，同理其他行级标签也是如此
在起作用。
2、height:2em; line-height:2em; 必须制定在要垂直居中的直接父级标签，比如这里，如果指定在li a中将不起作用。
二、div块的垂直居中
我想说用CSS写个兼容各种浏览器的div块的垂直居中，个人感觉必要性不大，即使实现了，也是需要添加一些无谓的标签。
大致意思就是把DIV 定义成table，为兼容IE 需要使用 top 50%和top -50% 还要搞一个绝对定位，两个相对定位。
如果你就想要个这种效果，请参看：蓝色理想 http://www.blueidea.com/tech/web/2006/3231.asp
一行文字居中的演示代码如下：
-
<!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>HTML+CSS垂直居中其实很简单_懒人建站 http://51xuediannao.com</title>
- <style>
- body,ul{
- padding:0px;
- margin:0px;
- padding-top:20px;
- font-size:10pt;
- font-family:"宋体";
- }
- ul{
- width:800px;
- height:400px;
- margin:0 auto;/*CSS才是水平居中全靠他了*/
- border: 1px solid #999999;
- list-style-type: none;
- }
- ul li{
- width:95%;
- height:auto;
- margin:0 auto;
- margin-bottom:4px;}
- ul li a{
- text-decoration: none;
- color:#333;
- width:100%;
- height:2em;
- line-height:2em;
- display:block;
- border: 1px solid #999999;
- }
- ul li a:hover{
- color: #FF0000;
- text-decoration: underline;
- }
- </style>
- </head>
- <body>
- <ul>
- <li><a href="http://www.51xuediannao.com/HTML+CSS/2009/1117/html+css01.html" title="html+css模板黄色调博客类HTML源码">html+css模板黄色调博客类HTML源码</a></li>
- <li><a href="http://www.51xuediannao.com/JS/texiao/20091117/QQnav.html" title="类似QQ的竖向展开折叠菜单HTML+CSS结构">类似QQ的竖向展开折叠菜单HTML+CSS结构</a></li>
- <li><a href="http://www.51xuediannao.com/JS/texiao/20091117/zhedie.html" title="HTML+CSS结构鼠标点击折叠展开折叠式菜单">HTML+CSS结构鼠标点击折叠展开折叠式菜单</a></li>
- <li><a href="http://www.51xuediannao.com/JS/texiao/20091117/qqkefu2.html" title="仿真QQ界面的随屏滚动QQ客服代码">仿真QQ界面的随屏滚动QQ客服代码</a></li>
- <li><a href="http://www.51xuediannao.com/JS/texiao/20091116/zhuangtailan.html" title="JS自定义链接的状态栏文字提示">JS自定义链接的状态栏文字提示</a></li>
- <li><a href="http://www.51xuediannao.com/JS/texiao/20091113/qqkf.html" title="JS+CSS左下角随屏滚动QQ客服浮动代码">JS+CSS左下角随屏滚动QQ客服浮动代码</a></li>
- <li><a href="http://www.51xuediannao.com/jiqiao/qita/20091111/ie6ie7ie8.html" title="让IE6具备IE7和IE8的特性(IE6也玩web标准)">让IE6具备IE7和IE8的特性(IE6也玩web标准)</a></li>
- </ul>
- </body>
- </html>
↓ 查看全文
HTML+CSS垂直居中其实很简单由懒人建站收集整理，您可以自由传播，请主动带上本文链接
懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
HTML+CSS垂直居中其实很简单-最新评论