Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Div+CSS > CSS之单行、多行文字垂直居中及图片垂直居中
隐藏/显示侧边栏

CSS之单行、多行文字垂直居中及图片垂直居中

2013-09-03 13:43    来源:http://www.cgner.com    责任编辑:admin    字号【
在网页设计div+css网页排版中,常常需要对文字和图片进行垂直居中,而往往不经如人意。那么如何才能,写出更具兼容的CSS文字/图片的垂直居中呢?搜集大量的网上资源各有概括。cgner.com

首先介绍几种文字垂直居中的方法。首先声明的是css中的 vertical-align 是无效的。W3C官网(http://www.w3.org/)中对 vertical-align 定义是:“ This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.”

实际上,一个Box中由很多行很多元素组成,vertical-align只作用于在同一行内的元素,它的垂直并不是相对于整个Box而言的。前面定义了一个60px的高度,但是这个Box中存在很多行,那段文本并不能对齐到中央。因此希望那段文本对齐中间,需要给它定义一个line-height的属性,让line-height为60px,作用于一行的vertical-align就可以工作了。

一:对于单行文字的垂直居中,很简单:只要保证DIV的高height和行高line-height一致即可。【该方法只是针对单行(这里的单行只的是一个块元素。)如果多行,大伙可以试试看,第二行会调至下一个块中。】

css代码如下:

#txt_juzhong{
height:200px;
line-height:200px;
border:1px solid #00f;
text-align:center;
}  /* 其中border 样式只是为了更清晰的看效果,text-align:center让文字水平居中,默认右对齐*/

xhtml代码如下:

<div id=”juzhong”>
www.itzai8.com
</div>

说明:如果在父级元素定义text-align:center;意思是让父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-right:auto; margin-left:auto;”。

二、但,如果是多行文字垂直居中,上面方法就不行了,得用变通的方法实现;这里建议使用table方法,在table外面再套上相应的div,

代码如下:
<div>
<table>
<tr><td style="vertical-align:middle;height:300px;background-color:red">
</td></tr>
</table>
</div>

三、多行文字垂直居中还有另外一种方法:
多行内容居中,且容器高度可变,也很简单,给出一致的 padding-bottom 和 padding-top 就行:

.div{
padding-top:30px;
padding-bottom:30px;
}

padding方法

优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器

缺点:
容器不能固定高度,如果加上了高度会没效果。

四、最后就是图片的垂直居中咯,很多人会习惯性的用img,其实最简单的方法就是把这个图片用background定位最简单,也最方便了。

.div{
background:url(“images/xys.jpg”) no-repeat center;
}

说明:如果只有一个图片而没有其他css就看不到效果,也看不到图片,需设置  height 高度要高于图片的高度,也可以再加个 border:4px solid #00f;  此时效果就很明显了。

bakground的center定义图片的位置。还可以写成“top  left”(左上角)或者”bottom right”等,也可以直接写数值”50 30″。 当然也可以用百分号。对于background-position位置的确认,除了确切的值是参考图片左顶点之外,其他的值都是相对图片的中心而言的。

更多
Tags 标签: CSS居中
责任编辑:admin
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |