郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

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

博彩评级提供网页素材下载、网站模板
这一切都是免费的!
当前位置:博彩评级 > div+css > css教程 >

HTML+CSS垂直居中其实很简单

来源:jquery 图片特效 作者: 这样也行 日期:2011-05-11 人气:
注意: 1、因为a标签是行元素,必须用display:block;把他变成块级元素,同理其他行级标签也是如此 在起作用。 2、height:2em; line-height:2em; 必须制定在要垂直居中的直接父级标签,比如这

本文地址:http://www.qqydc.com/html+css/htmlcssjq/cssjuzhong2.html
文章摘要:HTML+CSS垂直居中其实很简单,照出巴巴不存芥蒂,蚜虫红外号脉。

一、一行文本的垂直居中 查看演示

说明: 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.qqydc.com/951/tech/web/2006/3231.asp

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


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.qqydc.com/487/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.qqydc.com/642/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>HTML+CSS垂直居中其实很简单_博彩评级 http://www.qqydc.com/509</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.qqydc.com/HTML+CSS/2009/1117/html+css01.html" title="html+css模板黄色调博客类HTML源码">html+css模板黄色调博客类HTML源码</a></li> 
  45. <li><a href="http://www.qqydc.com/JS/texiao/20091117/QQnav.html" title="类似QQ的竖向展开折叠菜单HTML+CSS结构">类似QQ的竖向展开折叠菜单HTML+CSS结构</a></li> 
  46. <li><a href="http://www.qqydc.com/JS/texiao/20091117/zhedie.html" title="HTML+CSS结构鼠标点击折叠展开折叠式菜单">HTML+CSS结构鼠标点击折叠展开折叠式菜单</a></li> 
  47. <li><a href="http://www.qqydc.com/JS/texiao/20091117/qqkefu2.html" title="仿真QQ界面的随屏滚动QQ客服代码">仿真QQ界面的随屏滚动QQ客服代码</a></li> 
  48. <li><a href="http://www.qqydc.com/JS/texiao/20091116/zhuangtailan.html" title="JS自定义链接的状态栏文字提示">JS自定义链接的状态栏文字提示</a></li> 
  49. <li><a href="http://www.qqydc.com/JS/texiao/20091113/qqkf.html" title="JS+CSS左下角随屏滚动QQ客服浮动代码">JS+CSS左下角随屏滚动QQ客服浮动代码</a></li> 
  50. <li><a href="http://www.qqydc.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垂直居中其实很简单http://www.qqydc.com/html+css/htmlcssjq/cssjuzhong2.html

HTML+CSS垂直居中其实很简单由博彩评级收集整理,博彩评级:您可以自由传播,请主动带上本文链接

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

(责任编辑:博彩评级)