手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css布局网页水平居中常用方法
css布局网页水平居中常用方法
摘要:页面水平居中一般会令人很头疼,尤其新手。浏览器之间的不兼容也会带来很大问题。下面来说一下常见的页面水平居中办法。以下内容参见《精通CSS》。...

页面水平居中一般会令人很头疼,尤其新手。浏览器之间的不兼容也会带来很大问题。下面来说一下常见的页面水平居中办法。

以下内容参见《精通CSS》。

HTML代码:

复制代码 代码如下:

<body>

<divid="wrapper">

</div>

</body>

IE居中办法:

body{

text-align:center;

min-width:760px;

}

#wrapper{

width:720px;

text-align:left;

}

IE会将text-align:center误以为让所有东西居中,而不只是文本。然后将容器的内容重新对准左边即可。

非IE:

复制代码 代码如下:

#wrapper{

width:720px;

margin:0auto;

}

如何兼容IE和非IE?如下:

复制代码 代码如下:

#wrapper{

width:720px;

position:relative;

left:50%;

margin-left:-360px;

}

首先将容器左边边缘定位到页面中间,然后向左移动它宽度的一半。

【css布局网页水平居中常用方法】相关文章:

用CSS的float属性创建三栏布局网页的方法

用CSS实现垂直居中的3种方法

CSS网页布局的意义与副作用

DIV垂直居中的办法

CSS表单元素垂直居中完美解决方案

DIV+CSS标准化网页设计常用学习方法与技巧

css教程:DIV布局网页的常见错误

css布局中的居中问题

CSS图片垂直居中方法整理集合

CSS div居中的三种方法

精品推荐
分类导航