日期:2014-05-17 浏览次数:20775 次
<div style="text-align:center;width:200px;height:200px;border:1px solid black;"> 水平居中示例。 </div>
<table width="200" height="200" style="border:1px solid black;"> <tr> <td valign="middle">哈哈哈</td> </tr> </table>
使用Table垂直居中 |
<table width="200" height="200" style="border:1px solid black;"> <tr> <td valign="middle"><img src="/img/2012/09/27/1722188451.png"/></td> </tr> </table>
<table width="200" height="200" style="border:1px solid black;"> <tr> <td valign="middle"> <div> 使用Table垂直居中<br /> 使用Table垂直居中<br /> 使用Table垂直居中<br /> </div> </td> </tr> </table>
使用Table垂直居中
使用Table垂直居中 使用Table垂直居中 |
<div style="width:200px;height:200px;border:1px solid black;line-height:200px;"> 文字的垂直居中。 </div>
<div style="width: 300; height: 200;border:1px solid #C0C0C0;_position:relative;display:table;"> <div style="text-align:center;display:table-cell;_position: absolute;_top:expression((this.parentNode.offsetHeight-this.offsetHeight)/2);_left:expression((this.parentNode.offsetWidth-this.offsetWidth)/2);vertical-align:middle;"> 多行文字 <br /> 垂直居中 </div> </div>
<div style="width:200px;height:200px;border:1px solid black;line-height:200px;display: table-cell;vertical-align:middle;*display: block;*font-size:175px;*font-family:Arial;"> <img src="/img/2012/09/27/1722188451.png" style="vertical-align:middle;"/> </div>