1、在div css布局中,最常见的问题就是div如何居中的问题。主要利用两个属性来使div居中:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
首先在body内容区域内定义文本居中,这样所有在body父级元素内的内容就会居中。对于ie浏览器这样设置就可以了,但是火狐浏览器还必须加下面这句,左右让它自动来实现居中。总之,加上这两个css样式就可以实现居中了。不过不建议大家在书写div的时候都嵌套在一个div里,这样如果网页内容过多的话会影响打开速度。可以分开写每个div,然后在需要居中的地方加上MARGIN-RIGHT: auto; MARGIN-LEFT: auto; 就可以了。
2、在div中如何使图片垂直居中
不提倡直接把图片写在网页文件中,应该用背景的方法来实现。例如:
body{BACKGROUND: url(/images/logos.gif) #FFF no-repeat center;}
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者”bottom right”等,也可以直接写数值”50 30″。通过调节间距实现居中。
3、在div中如何使文本垂直居中
使用文本就不能再用图片了,这时可以用增高行距的办法变通实现垂直居中
<div id="center" style="margin-right: auto; margin-left: auto;">
文本垂直居中,背景图片居中
</div>
说明:
vertical-align:middle;
表示行内垂直居中,我们将行距增加到和整个DIV一样高 line-height:200px;
然后插入文字,就垂直居中了。
垂直居中,也可用如下方法:
align {
text-align:center center;
}
或
align {
text-align:50% 50%;
}
xiexie ni le
像这种<div align="center"><script 。。。</script></div>,可以添加那些代码使其垂直居中,本人在代码上还是个菜鸟,谢谢博主!
呵呵 关于*{padding:0px;margin:0px;} 的确是这样的。
这个页面也是临时写出来交流用 :)
关于css,以后多多交流
第一种方法可行,不过还可以写得更简便 :)
第二种方法存在兼容问题,在谷歌浏览器下…..
交流下自己的方法吧,一起学习
留言无法写代码,我写了一个页面在这里
ctrl1.cn/temp/
[reply=任侠,2010-01-22 08:50 AM]恩,这个只是临时总结的,没仔细地测试过,只是昨天用到了,用的是第三种方法。
你那个页面很不错,只是像*{padding:0px;margin:0px;}这种写法,我觉得需要慎重一下,这个影响范围太广不太好协调控制。比如body div这个可能是你想要的,但是对于li table等标签,可能会带来一些麻烦,考虑使用这样缩小范围的定义:
body, div{padding:0;margin:0;}
[/reply]
[reply=任侠,2010-01-22 09:07 AM]第二种方法在谷歌里没问题,在火狐里会只是水平居中垂直靠上。看来用百分比的方法是都兼容的[/reply]