一、margin:auto 0 与 text-aligh:center
在现代浏览器（如Internet Explorer 7、Firefox、Opera等）现代浏览器实现水平居中的方法很简单，只要设定到左右两侧的空白为自动即可。意即：
#wrap { margin:0 auto}
上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置，上下为0（可以为任意）。请在现代浏览器（如Internet Explorer 7、Firefox、Opera等）中运行现在的代码：
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞ new document ＜/title＞
＜meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" /＞ http://w.j0114.blog.163.com/
＜style type="text/css"＞
div#wrap {
width:760px
margin:0 auto
border:1px solid #333
background-color:#ccc
}
＜/style＞
＜/head＞
＜body＞
＜div id="wrap"＞
在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto即可
＜pre＞
div#wrap {
width:760px
margin:0 auto/*这里的0可以任意值*/
border:1px solid #ccc
background-color:#999
}
＜/pre＞
＜/div＞
＜/body＞
＜/html＞
上面的效果很好。但是这在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
}
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞ http://w.j0114.blog.163.com/
＜head＞
＜title＞ CSS+Div实现水平居中对齐的页面布局 ＜/title＞
＜meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" /＞
＜style type="text/css"＞
body { text-align:center}
div#wrap {
text-align:left
width:760px
margin:0 auto
border:1px solid #333
background-color:#ccc
}
＜/style＞
＜/head＞
＜body＞
＜div id="wrap"＞
在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto即可
＜pre＞
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
}
＜/pre＞
＜/div＞
＜/body＞
＜/html＞
1楼的方法是错误的，注意到框架标记位于百body元素外，是不度能将他嵌入到div标记中的，正确的方法是只能用iframe，首先用表格或div进行网页布局，问将表格或div设置为页面居中显示答，如div{margin:0auto
width:768px}，然后再在要插入框架回的地方嵌入iframe标记，把iframe标记的src指向框架页，这样答虽不是用frameset做的，但完全能实现你要的效果
<body><div style="margin: auto width=800pxheight=300px">
<iframe src="06iframe.html" frame border="0" scrolling="auto" width="800" height="300" >
</iframe>
</div>
</body>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）