垂直居中
1. 兼容IE6
<!doctype html> <html> <head> <title>My Document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="Author" content="lazy2009.iteye.com"> <script src="C:/javascript/jquery-1.10.2.js"></script> <script src="C:/javascript/json2.js"></script> <style> *{ padding:0; margin:0; } #content { border: 1px solid red; width:500px; height:400px; text-align:center; } #content *{ vertical-align: middle; } img.aid { width:0; height:100%; } </style> </head> <body> <div id="content"> <img src="" class="aid"></img> <span>Content here</span> <img src="http://www.baidu.com/img/bdlogo.gif"></img> </div> </body> </html>
div水平居中很容易,设置css样式 text-align: center; 就可以了。
垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。
第一种方法:通过一个空白图片可以达到垂直居中的效果。
代码如下 | 复制代码 |
<html> /*定义div大小,以及水平居中*/ /*辅助图片高度填满div,宽度为0,所以看不到这个图片*/
|
个人觉得vertical-align: middle 是相对于左边的高度垂直居中的,我给左边一个填满div的图片,就可以实现垂直居中了。
第二种方法:往div里面加表格。
代码如下 | 复制代码 |
<html> <style> #a { background: #fff000; width: 500px; height: 500px; overflow: hidden; text-align: center; } </style> <body> <div id="a"> <table width="100%" height="100%"> <tr> <td align="center"> <img src="skin/images/top/logo.jpg" /> </td> </tr> </table> </div> </body> </html> |
在表格里就很容易设置居中了。
经测试,这两种做法都没有浏览器不兼容的问题。推荐用第一种方法。
另外,说一下overflow: hidden; 这个属性,当图片大小超出div的大小时,会影藏超出的部分。不设置的话,图片会全部显示,覆盖在div上。
<!doctype html> <html> <head> <title>My Document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="Author" content="lazy2009.iteye.com"> <style> *{ padding:0; margin:0; } #wrapper { border: 1px solid red; width:200px; height:200px; position:relative; } .content{ border:1px solid red; width:100px; position:absolute; top:50%; height:120px; margin-top:-60px; /* negative half of the height */ } </style> </head> <body> <div id="wrapper"> <div class="content"> 12342314 </div> </div> <script> </script> </body> </html>
<!doctype html> <html> <head> <title>My Document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="Author" content="lazy2009.iteye.com"> <script src="C:/javascript/jquery-1.10.2.js"></script> <script src="C:/javascript/json2.js"></script> <style> *{ padding:0; margin:0; } #content {height:100px; line-height:100px;border: 1px solid red;} </style> </head> <body> <div id="content"> <p>Content here</p> </div> </body> </html>
2.不兼容IE6
<!doctype html> <html> <head> <title>My Document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="Author" content="lazy2009.iteye.com"> <style> #wrapper { display:table;border: 1px solid red; width:200px; height:200px; } #cell {display:table-cell; vertical-align:middle;} .content{ width:100px; height:100px; border: 1px solid red; } </style> </head> <body> <div id="wrapper"> <div id="cell"> <div class="content"> </div> </div> </div> <script> </script> </body> </html>
<!doctype html> <html> <head> <title>My Document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="Author" content="lazy2009.iteye.com"> <script src="C:/javascript/jquery-1.10.2.js"></script> <script src="C:/javascript/json2.js"></script> <style> *{ padding:0; margin:0; } #wrapper { border: 1px solid red; width:200px; height:480px; position:relative; } #floater{ float:left; height:50%; margin-bottom:-120px; } #content{ clear:both; height:240px; position:relative; border : 1px solid red; } </style> </head> <body> <div id="wrapper"> <div id="floater"></div> <div id="content"> Content here </div> </div> <script> </script> </body> </html>
<!doctype html> <html> <head> <title>My Document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="Author" content="lazy2009.iteye.com"> <script src="C:/javascript/jquery-1.10.2.js"></script> <script src="C:/javascript/json2.js"></script> <style> *{ padding:0; margin:0; } #wrapper { border: 1px solid red; width:200px; height:480px; position:relative; } #content { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:240px; width:70%; border: 1px solid red; } </style> </head> <body> <div id="wrapper"> <div id="content"> Content here </div> </div> <script> </script> </body> </html>