手机
当前位置:查字典教程网 >网页设计 > 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让DIV层水平居中

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

css网页制作实用技巧9则

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

CSS div居中的三种方法

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

DIV垂直居中的办法

css中不确定高度垂直居中2种方法

css中元素水平垂直居中4种方法介绍

css布局中的居中问题

精品推荐
分类导航