css网页布局div水平居中的各种方法

《css网页布局div水平居中的各种方法》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、CSS网页布局DIV水平居中的各种方法一、margin:auto0与text-aligh:center　　在现代浏览器（如InternetExplorer7、Firefox、Opera等）现代浏览器实现水平居中的方法很简单，只要设定到左右两侧的空白为自动即可。意即：#wrap{margin:0auto;}　　上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置，上下为0（可以为任意）。请在现代浏览器（如InternetExplorer7、Firefox、Opera等）中运行现在的代码：＜styletype="text/css"＞div#wrap{width:

2、760px;margin:0auto;border:1pxsolid#333;background-color:#ccc;}＜/style＞＜/head＞＜body＞＜divid="wrap"＞　　在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0auto;即可＜pre＞div#wrap{width:760px;margin:0auto;/*这里的0可以任意值*/border:1pxsolid#ccc;background-color:#999;}＜/pre＞＜/div＞　　上面的效果很好。但是这在InternetExplorer6及改正的版本中

3、是不起作用的，不过幸好它有自己的解决办法。在InternetExplorer中text-align属性是可继承的，即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text-align属性值为center，这样页面内所有的元素都会自动居中，同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式——居左对齐。因此我们要如此来写代码：body{text-align:center;}#wrap{text-align:left;}　　这样在InternetExplorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果

4、，我们就可以这样写我们的代码：body{text-align:center;}#wrap{text-align:left;margin:0auto;}＜styletype="text/css"＞body{text-align:center;}div#wrap{text-align:left;width:760px;margin:0auto;border:1pxsolid#333;background-color:#ccc;}＜/style＞＜divid="wrap"＞　　在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0auto;即可＜pre＞d

5、iv#wrap{width:760px;margin:0auto;/*这里的0可以任意值*/border:1pxsolid#ccc;background-color:#999;}　　在InternetExplorer6及以下的版本中我们还要做以下的设置：body{text-align:center;}div#wrap{text-align:left;}＜/pre＞＜/div＞　　不过这里有一个前提，就是设置居中的元素要有固定的宽度，比如这里我们设定了为760像素。二、相对定位与负的边距对于wrap进行相对定位，然后使用负的边距抵消偏移量。这种方法比较简单还很容易实现：#w

6、rap{position:relative;width:760px;left:50%;margin-left:-380px}这段代码的意思是，设置wrap的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也就是left:50%含意）；最后我们再从中间位置向左偏移回一半的距离来，这样就实现了水平居中了。＜styletype="text/css"＞div#wrap{position:relative;width:760px;left:50%;margin-left:-380px;border:1pxsolid#333;background-color:#

7、ccc;}＜/style＞＜divid="wrap"＞　　在所有浏览器中都有效的方法：＜pre＞div#wrap{position:relative;width:760px;left:50%;margin-left:-380px;border:1pxsolid#333;background-color:#ccc;}＜/pre＞＜/div＞　　同样，在设定水平居中前你需要设定一个固定的宽度。　　P.S.究竟选择哪个方法？　　上面两个方法究竟选择哪种方法好呢？在第一种方法中貌似使用了Hack技术，其实并没有，它是中规中矩的Web标