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

9,609次阅读
4 条评论

共计 807 个字符,预计需要花费 3 分钟才能阅读完成。

提醒:本文最后更新于2018-05-19 11:50,文中所关联的信息可能已发生改变,请知悉!

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
任侠
版权声明:本站原创文章,由 任侠 于2010-01-21发表,共计807字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(4 条评论)
验证码
酸葡萄 评论达人 LV.1
2012-08-14 22:34:50 回复

xiexie ni le

     中国内蒙古呼和浩特市联通
yinyan 评论达人 LV.1
2011-04-21 18:20:01 回复

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

     中国山西省长治市联通
Elten 评论达人 LV.1
2010-01-22 17:18:25 回复

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

     中国河南省洛阳市电信
ELten 评论达人 LV.1
2010-01-22 08:44:06 回复

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

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

     中国河南省洛阳市联通