实现Div层里的文字垂直居中的方法 有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中的方法。
首先要知道css里vertical-align无效,W3C官方对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高和行高保持一致,就可以了。用下面的代码即可实现:
CSS代码:
#div-a{
height:60px;
line-height:60px;
}
XHTML代码:
<div id="div-a">
div 文字 垂直居中
</div>
如果还想让div里的文字水平居中,加上“text-align:center;”即可;代码如下:
CSS代码:
#div-a{
text-align:center;
height:60px;
line-height:60px;
}
XHTML代码:
<div id="div-a">
css div 文字
垂直居中
div css 文字
水平居中
</div>
说明:如果在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto; MARGIN-LEFT:auto;”。
但是,如果是多行文字,上面的垂直居中的方法就不行了,得用变通的方法实现;这里建议使用table方法,在table外面再套上相应的div,代码如下:
<table>
< tr><td style="vertical-align:middle;height:300px;background-color:red">
居中的方法
< /td></tr>
< /table>
多行文字居中还有另外一种方法:
多行内容居中,且容器高度可变,也很简单,给出一致的 padding-bottom 和 padding-top 就行:
.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}
优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点:
容器不能固定高度(参考)
如何使图片在DIV中垂直居中,可以用背景的方法。如下:
body{
BACKGROUND:url(http://www.jeecn.com
) #FFF no-repeat center;
}
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"。
分享到:
相关推荐
div框水平垂直居中跟内容垂直居中
DIV+CSS水平 垂直居中.docDIV+CSS水平垂直居中
DIV水平垂直居中,都是利用jquery实现的,很简单
该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
在DIV中图片垂直/水平居中(最简单方法)
介绍: 很多朋友都在问这个问题,div的内容图片垂直居中代码,这个代码兼容多浏览器。
不定宽高元素的垂直和水平居中,兼容IE67
垂直居中显示ie7+
NULL 博文链接:https://zhouyao.iteye.com/blog/417432
NULL 博文链接:https://highfly-s.iteye.com/blog/1878910
div+css文本水平垂直居中,兼容ie、谷歌等浏览器
相对于body居中的另外一种写法 原理比较难以理解,这里只简单的说下如何使用: 1、在body的根目录下建立两个嵌套的div 2、分别给两个div加上样式属性即可,详细请见附件index.html文件
垂直居中:<div xss=removed>Content</div> 两者结合,就可以绝对居中了: 复制代码代码如下: <div xss=removed align=”center”>Content</div> 不过对于垂直居中,却要设置固定高度,有点不方便,暂时想不到...
前些天在W3CPlus看到了一篇文章,提到用CSS制作水平垂直居中,在测试其中的第六点时发现了一些小问题: 添加了一个无意义的新标签 复制代码代码如下: <div id=”extra”> 当设定内容宽度的时候,文本换行了 对于...
学习过程中经常遇到要居中的问题,水平居中问题比较好解决,而垂直居中问题因为vertical-align经常失效,所以不容易实现,今天将自己总结的一些方法归纳于这边。 1.div中单行文字垂直水平居中。条件:外层div高度...
纯css完美地解决图片以及div垂直水平居中,兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari具体实现css 如下,感兴趣的朋友可以参考下哈
这是几种图片在div层的居中方法,其中垂直居中不好实现的问题是兼容性问题,其中有兼容性不错的居中方法实例。
div水平垂直居中方法绝对定位(margin:auto实现居中)/* margin设置为auto实现绝对定位元素的垂直居中 */绝对定位(margin 负值实现
div+css布局限制图片最大宽度图片水平垂直居中兼容IE6
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...