关于使用CSS居中(包括水平/垂直)

来源: BlogBus 原始链接: http://forest.blogbus.com:80/logs/2005/11/1641921.html 存档链接: https://web.archive.org/web/20060101071544id_/http://forest.blogbus.com:80/logs/2005/11/1641921.html


深山老林 生活随笔 << CSS 锦囊 | 首 页 | js窗口移动的方法 >> 2005-11-28 关于使用CSS居中(包括水平/垂直) TAG: CSS 代码分享 原创 今天有网友问到用CSS的text-align: center属性在FF中不起作用的问题,找了一下网上的资料,总结了一下: 水平居中的问题可以用以下方法解决: 先看一下body的CSS样式:

body{ margin:0;padding:0;text-align:center;}

这里的body把margin与padding设置为0,这样就把body内容与浏览器边缘亲密接触。然后text-align:center 把body的内容全部居中。 在需要水平居中的DIV层添加以下属性:

margin-left: auto; margin-right: auto;

也可写成:

margin:0 auto;

这样在FF中就可以居中了,在IE中别忘了在开头加上DTD哦,不然可是不起作用的:


如何使图片在DIV 中垂直居中 用背景的方法。举例:

body{BACKGROUND: #FFF url( http://www.blogbus.com/images/site/blogbus_logo.gif ) no-repeat center;}

关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等,也可以直接写数值"50 30" 如何使文本在DIV中垂直居中 果是文字,便不能用背景方法,可以用增高行距的办法变通实现垂直居中,完整代码如下: