你的位置:首页 > 软件开发 > 网页设计 > CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

发布时间:2015-04-23 16:00:57
CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。水平居中1、行内元素行内元素(主要是表现为文字,图片等行内元素),通过在父级元素设置 text-align:cente ...

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 CSS:现代浏览器表现正常:CSS:水平居中与垂直居中IE7有时候会出现问题:CSS:水平居中与垂直居中CSS:
1 div{2  text-align:center;3 }4 ul{list-style:none;margin:0;padding:0;display:inline;}5 li{margin-right:8px;display:inline;}
各浏览器表现正常居中,IE7也没有出现什么问题。---------------------------------------------------------吃完栗子---------------------------------------------------------CSS:
 1 div{ 2   display: inline-block; 3   /*兼容IE6,IE7*/ 4   *display: inline; 5   *zoom:1; 6   position:relative; 7   left:50% 8 } 9 ul{10   /*兼容IE6*/11   _display: inline;12   _zoom:1;13   list-style:none;14   margin:0;15   padding:0; 16   position:relative;17   left:-50%;18 }19 li{20   float:left;21   margin-right:8px;22 }
chrome,Firefox,opera,IE6+都可以表现正常。CSS:---------------------------------------------------------吃完栗子---------------------------------------------------------CSS:
 1 .wrap{ 2   width:200px; 3   height: 200px; 4   background:#ccc; 5   position: relative; 6 } 7 .container{ 8   width: 100px; 9   height:100px;10   background: #00ff00;11   position:absolute; 12   right: 0;13   left:0;14   top:0; 15   bottom:0; 16   margin:auto; 17 }
chrome,Firefox,opera,IE8+表现如下,水平垂直居中:---------------------------------------------------------吃完栗子--------------------------------------------------------- 这里 top改为 bottom,margin-top 改为 margin-bottom 效果一样,这种方法适用于原本设置了 position 为 absolute 的元素。CSS:chrome,Firefox,opera,IE6+都能够居中:IE6 由于 3px bug表现稍微不同,不过由于这里主要讨论垂直居中,所以就不对其作过多留意。 CSS:
 1 .wrap{ 2   width: 100px; 3   height: 200px; 4   background: #ccc; 5 } 6 .floatdiv { 7   *width: 1px;/*兼容IE6、IE7*/ 8   float:left;  9   height:50%; 10   margin-bottom:-50px;11 }12 .container {13   clear:both; 14   height:100px; 15   position:relative;16   background: #00ff00;17 }
chrome,Firefox,opera,IE6+都能够居中:CSS:水平居中与垂直居中---------------------------------------------------------吃完栗子--------------------------------------------------------- CSS:chrome,Firefox,opera,IE6+表现如下:CSS:水平居中与垂直居中注: CSS:
1 div{2  width:100px;3  height:200px;4  background:#ccc;5  display:table-cell;6  vertical-align:middle;7 }
chrome、Firefox 、opera、IE8 及以上的浏览器表现正常,IE6 和 IE7 则无法居中。---------------------------------------------------------吃完栗子---------------------------------------------------------

原标题:CSS:水平居中与垂直居中

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。