CSS控制DIV文本和图片水平居中和垂直居中

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%;
}
点赞 (0)
  1. yinyan说道:

    像这种<div align="center"><script 。。。</script></div>,可以添加那些代码使其垂直居中,本人在代码上还是个菜鸟,谢谢博主!

  2. Elten说道:

    呵呵 关于*{padding:0px;margin:0px;} 的确是这样的。
    这个页面也是临时写出来交流用 :)
    关于css,以后多多交流

  3. ELten说道:

    第一种方法可行,不过还可以写得更简便 :)
    第二种方法存在兼容问题,在谷歌浏览器下…..

    交流下自己的方法吧,一起学习
    留言无法写代码,我写了一个页面在这里
    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]

回复 Elten 取消回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code