CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。水平居中1、行内元素行内元素(主要是表现为文字,图片等行内元素),通过在父级元素设置 text-align:cente ...
CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指
div 等块级标签元素的居中。 CSS:现代浏览器表现正常:
IE7有时候会出现问题:
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:chrome,Firefox,opera,IE6+表现如下:
注: 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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。