/* from: http://guoxuelin.cn.blog.163.com/blog/static/4917562620093405115780/ */
一、Div层居中
如果在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义设定时再加上“MARGIN-RIGHT:auto; MARGIN-LEFT:auto;”。
二、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.” 1、单行文字垂直居中。一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。比如定义了一个60px的高度，但是这个Box中存在很多行，那段文本并不能对齐到中央。如果希望那段文本对齐中间，需要给它定义一个line-height的属性，让line-height为60px，即保证div高和行高保持一致，作用于一行的vertical-align就可以工作了。 CSS代码： #div-a{height:60px; line-height:60px;} XHTML代码： <div id="div-a">好好先生欢迎您</div> 如果还想让div里的文字水平居中，再加上“text-align:center;”即可；代码如下： CSS代码： #div-a{text-align:center; height:60px; line-height:60px;} XHTML代码： <div id="div-a">好好先生欢迎您</div>
2、多行文字垂直居中有两种方法。
方法一、建议在div层中嵌套table标签，原因很简单，在div中vertical-align无效，但在table中可以。代码如下： <table> <tr><td style="vertical-align:middle;height:300px;background-color:ff1fff"> 在div层中嵌套table标签<br>在div层中嵌套table标签</td></tr> </table>
方法二、多行文字居中，且容器高度可变时，给出一致的 padding-bottom 和 padding-top 。 .middle-demo-2{ padding-top: 24px; padding-bottom: 24px; } 优点： 1. 同时支持块级和内联极元素 2. 支持非文本内容 3. 支持所有浏览器 缺点： 容器不能固定高度
三、Div层里的图片垂直居中。
1、背景图片的方法。
代码如下：body{ BACKGROUND:url(http://www.piaoyi.org/images/logo.gif) #FFF no-repeat center;}
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"。
2、嵌套table标签。代码如下： <div style= "height:300px;background:#DEDEDE; 60%; ">
3、代码如下：
<style type="text/css"> <!-- * {margin:0;padding:0} div { 500px; height:500px; border:1px solid #666; overflow:hidden; position:relative; text-align:center; display:table-cell; vertical-align:middle;} div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50%;left:-50%; } --> </style>
4、代码如下：
<style> .box { display: table-cell; vertical-align:middle; text-align:center; *display: block; *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/ 200px; height:200px; border: 1px solid #eee; } .box img { vertical-align:middle; border:0;} </style> <body> <div class="box"> <a href="http://www.howpm.com" target="_blank"><img src="http://howpm.com/images/dz7/logo.gif" /></a> </div> |
