Created
April 25, 2014 02:30
-
-
Save kiinlam/11276104 to your computer and use it in GitHub Desktop.
文本垂直居中
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <title>ie中垂直居中</title> | |
| <meta charset=UTF-8"> | |
| <style type="text/css"> | |
| #div1{ | |
| width:300px; | |
| position:absolute; | |
| border:1px solid #000; | |
| top:100px; | |
| left:200px; | |
| display:table; | |
| } | |
| .div2{ | |
| display:table-cell; | |
| vertical-align:middle; | |
| *position:absolute; | |
| *top:50%; | |
| } | |
| span{ | |
| *position:relative; | |
| *top:-50%; | |
| } | |
| button{ | |
| cursor:pointer; | |
| } | |
| </style> | |
| <script> | |
| function add(){ | |
| var div1=document.getElementById('div1'); | |
| var h=div1.offsetHeight; | |
| div1.style.height=h+30+'px'; | |
| } | |
| function reduce(){ | |
| var div1=document.getElementById('div1'); | |
| var h=div1.offsetHeight; | |
| div1.style.height=h-30+'px'; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="div1" style="height:200px"> | |
| <div class="div2"> | |
| <span>IE6/7使用定位关系来垂直居中，IE8/9使用display:table和display:table-cell</span> | |
| </div> | |
| </div> | |
| <button type="button" id="add" onclick="add()">增加高度</button><br/><br/> | |
| <button type="button" id="reduce" onclick="reduce()">减少高度</button> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment