《div层中内容的居中》由会员分享，可在线阅读，更多相关《div层中内容的居中（2页珍藏版）》请在金锄头文库上搜索。
1、有时候，为了网页设计的美观，需要把 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
2、.” 实际上，一个 Box 中由很多行很多元素组成， vertical-align 只作用于在同一行内的元素，它的垂直并不是相对于整个 Box 而言的。前面定义了一个 60px 的高度，但是这个 Box中存在很多行，那段文本并不能对齐到中央。因此希望那段文本对齐中间，需要给它定义一个 line-height 的属性，让 line-height 为 60px，作用于一行的 vertical-align 就可以工作了。如果是单行文字想垂直居中，只要保证 div 高和行高保持一致，就可以了。用下面的代码即可实现：CSS 代码：#div-aheight:60px;line-height:60px;XH
3、TML 代码：飘易博客欢迎大家访问如果还想让 div 里的文字水平居中，加上“text-align:center;”即可；代码如下：CSS 代码：#div-atext-align:center;height:60px;line-height:60px;XHTML 代码：飘易博客欢迎大家访问 说明：如果在父级元素定义 TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中；对于 IE 这样设定就已经可以了。但在 mozilla 中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto; MARGIN-LEFT:auto;”。但是，如果是多行文字，
4、上面的垂直居中的方法就不行了，得用变通的方法实现；这里建议使用 table 方法，在 table 外面再套上相应的 div，代码如下：飘易博客欢迎大家访问 www.piaoyi.org多行文字居中还有另外一种方法：多行内容居中，且容器高度可变，也很简单，给出一致的 padding-bottom 和 padding-top 就行：.middle-demo-2padding-top: 24px;padding-bottom: 24px;优点：1. 同时支持块级和内联极元素2. 支持非文本内容3. 支持所有浏览器缺点：容器不能固定高度（参考）如何使图片在 DIV 中垂直居中，可以用背景的方法。如下：bodyBACKGROUND:url(http:/www.piaoyi.org/images/logo.gif) #FFF no-repeat center; 关键就是最后的 center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者bottom right等，也可以直接写数值 50 30。
