css中如何使div居中(垂直水平居中)
2007/1/22 12:48:54
阅读全文(4476) | 回复(1) | 编辑 | 精华
如何使DIV居中,div垂直居中,div水平居中.主要的样式定义如下： body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。 如何使图片在DIV 中垂直居中用背景的方法。举例： body{BACKGROUND: url(UploadFiles/2006/05181435734.gif) #FFF no-repeat center;} 关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30" 效果如下： 如何使文本在DIV中垂直居中如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下： <html><head><style>body{TEXT-ALIGN: center;}#center{ MARGIN-RIGHT: auto;MARGIN-LEFT: auto; height:200px;background:#F00;width:400px;vertical-align:middle;line-height:200px;}</style></head><body><div id="center"><p>test content</p></div></body></html> 说明：vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。
Posted by Qr on 2007/1/22 12:48:54
问题请教
2008/12/29 16:05:20
个人主页 | 引用回复 | 主人回复 | 返回 | 编辑 | 删除
input和图片、按钮 水平对齐 1、div + css 2、适用几个主流浏览器：IE6、IE7、Firefox 2.x、Firefox 3.x、Chrome 3、代码尽量简洁 4、请不要用bg做按钮 5、能用列表做最好如： <ul> <li>input</li> <li>picture</li> </ul> 或 <dl> <dd>input</dd> <dd>picture</dd> </dl> 请指点一下，我是从bbs.xml.org.cn 找过来的呵呵 以下为blog主人的回复： 这几个控件本来就是很麻烦的东东，再来跨浏览器，晕。建议用ul\li+CSS来慢慢调试吧，很麻烦的。偶的BLOG至今还没调试好呢，呵呵。
tomcai(游客)
Posted by tomcai(游客) on 2008/12/29 16:05:20
| 发表评论： |