【转】Div+CSS教程:实现div容器水平居中的方法小结_html/css_WEB-ITnose
程序员文章站
2022-05-10 12:49:23
...
在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的 知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法:一、margin:auto 0 与 text-aligh:center
在现代浏览器(如Internet Explorer 7、Firefox、Opera等)现代浏览器实现水平居中的方法很简单,只要设定到左右两侧的空白为自动即可。意即:
#wrap { margin:0 auto;}
上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置,上下为0(可以为任意)。请在现代浏览器(如Internet Explorer 7、Firefox、Opera等)中运行现在的代码:
?
在现代浏览器(如Internet Explorer 7、Firefox、Opera等)现代浏览器实现水平居中的方法很简单,只要设定到左右两侧的空白为自动即可。意即:
#wrap { margin:0 auto;}
上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置,上下为0(可以为任意)。请在现代浏览器(如Internet Explorer 7、Firefox、Opera等)中运行现在的代码:
div#wrap {width:760px;margin:0 auto; /*这里的0可以任意值*/border:1px solid #ccc;background-color:#999;} 上面的效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的,不过幸好它有自己的解决办法。在 Internet Explorer中text-align属性是可继承的,即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text- align属性值为center,这样页面内所有的元素都会自动居中,同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式??居左对齐。因 此我们要如此来写代码: body {text-align:center;} #wrap {text-align:left;} 这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果,我们就可以这样写我们的代码: body { text-align:center; } #wrap { text-align:left; margin:0 auto; } div#wrap {width:760px;margin:0 auto; /*这里的0可以任意值*/border:1px solid #ccc;background-color:#999;}在Internet Explorer 6 及以下的版本中我们还要做以下的设置:body { text-align:center; }div#wrap {text-align:left;} 不过这里有一个前提,就是设置居中的元素要有固定的宽度,比如这里我们设定了为760像素。 二、相对定位与负的边距 对于wrap进行相对定位,然后使用负的边距抵消偏移量。这种方法比较简单还很容易实现: #wrap { position:relative; width:760px; left:50%; margin-left:-380px } 这段代码的意思是,设置wrap的定位是相对于其父元素body标签的,然后将其左边框移动到页面的正中间(也就是left:50%含意);最后我们再从中间位置向左偏移回一半的距离来,这样就实现了水平居中了。 div#wrap {position:relative;width:760px;left:50%;margin-left:-380px;border:1px solid #333;background-color:#ccc;} 同样,在设定水平居中前你需要设定一个固定的宽度。 究竟选择哪个方法? 上面两个方法究竟选择哪种方法好呢?在第一种方法中貌似使用了Hack技术,其实并没有,它是中规中矩的Web标准写法,完全符合规范,因此,两个种方法中完全可以随便的选取其中的任一种进行使用,他们不存在CSS hack的问题。 三、其它的居中方式 上面所说的都是设定了具体宽度的情况下水平居中的实现。有时候我们想做一个弹性布局,或者当一个元素处于一个容器中时我们只想让它居中并不想 设定一个具体的宽度。其实这并不是真正的居中布局,就像对一个100%长度的元素来说,你说它是居中对齐还是居左对齐呢?所以所有不高宽度的居中都不是真 正的居中。这样的设计我们是使用的像元素的padding来设置的,实际中我们是改变了父元素的容器大小: 如我们希望wrap元素长度随窗口而改变,同时又维持居中,我们就可以这样写: body { padding:10px 150px; } 这里,我们只需要保持父元素左右两侧的填充是相等的就可以了。 body {padding:10px 150px;}这里,我们只需要保持父元素左右两侧的填充是相等的就可以了。 当然这只是“貌似居中”,不过却常常很有用处。 |