知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    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

    一行文字居中的演示代码如下:

    
    
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. <head> 
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. <title>HTML+CSS垂直居中其实很简单_懒人建站 http://51xuediannao.com</title> 
    6. <style> 
    7. body,ul{  
    8. padding:0px;  
    9. margin:0px;  
    10. padding-top:20px;  
    11. font-size:10pt;  
    12. font-family:"宋体";  
    13. }  
    14. ul{  
    15.     width:800px;  
    16.     height:400px;  
    17.     margin:0 auto;/*CSS才是水平居中全靠他了*/  
    18.     border: 1px solid #999999;  
    19.     list-style-type: none;  
    20. }  
    21. ul li{  
    22. width:95%;  
    23. height:auto;  
    24. margin:0 auto;  
    25. margin-bottom:4px;}  
    26. ul li a{  
    27.     text-decoration: none;  
    28.     color:#333;  
    29.     width:100%;  
    30.     height:2em;  
    31.     line-height:2em;  
    32.     display:block;  
    33.     border: 1px solid #999999;  
    34. }  
    35. ul li a:hover{  
    36.     color: #FF0000;  
    37.     text-decoration: underline;  
    38. }  
    39. </style> 
    40. </head> 
    41.  
    42. <body> 
    43. <ul> 
    44. <li><a href="http://www.51xuediannao.com/HTML+CSS/2009/1117/html+css01.html" title="html+css模板黄色调博客类HTML源码">html+css模板黄色调博客类HTML源码</a></li> 
    45. <li><a href="http://www.51xuediannao.com/JS/texiao/20091117/QQnav.html" title="类似QQ的竖向展开折叠菜单HTML+CSS结构">类似QQ的竖向展开折叠菜单HTML+CSS结构</a></li> 
    46. <li><a href="http://www.51xuediannao.com/JS/texiao/20091117/zhedie.html" title="HTML+CSS结构鼠标点击折叠展开折叠式菜单">HTML+CSS结构鼠标点击折叠展开折叠式菜单</a></li> 
    47. <li><a href="http://www.51xuediannao.com/JS/texiao/20091117/qqkefu2.html" title="仿真QQ界面的随屏滚动QQ客服代码">仿真QQ界面的随屏滚动QQ客服代码</a></li> 
    48. <li><a href="http://www.51xuediannao.com/JS/texiao/20091116/zhuangtailan.html" title="JS自定义链接的状态栏文字提示">JS自定义链接的状态栏文字提示</a></li> 
    49. <li><a href="http://www.51xuediannao.com/JS/texiao/20091113/qqkf.html" title="JS+CSS左下角随屏滚动QQ客服浮动代码">JS+CSS左下角随屏滚动QQ客服浮动代码</a></li> 
    50. <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> 
    51. </ul> 
    52.  
    53. </body> 
    54. </html> 
    ↓ 查看全文

    HTML+CSS垂直居中其实很简单由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    HTML+CSS垂直居中其实很简单-最新评论