我正在尝试创建方形元素,它将使文本在垂直和水平方向上居中.此外,广场的整个区域应该是一个链接.这是我的
HTML：
<div class="w1h1 medium">
<a class="userLink" target="_blank" href="fancybox.aspx">
<table style="width: 100%; height: 100%">
<tr style="vertical-align: central">
<td style="text-align: center; font-weight: bold;">
text in the middle
</td>
</tr>
</table>
</a>
</div>
这是我的CSS：
div.w1h1 {
width: 150px;
height: 150px;
}
.medium {
background-color: #06849b;
color: white;
font-family: sans-serif;
}
a.userLink
{
width: 150px;
height: 150px;
display: table;
color: #FFFFFF;
text-decoration: none;
}
它适用于Chrome和Firefox,但不适用于Internet Explorer.在IE中,文本位于正方形的顶部,而不是在中间.你能帮我解决这个问题吗？
我刚刚在这里创建了游乐场：http://jsfiddle.net/Tschareck/yfnnm/
解决方法
您可以稍微简化一下结构,并在元素上使用display：table-cell.
HTML
<div class="w1h1 medium">
<a class="userLink" target="_blank" href="fancybox.aspx">
text in the middle
</a>
</div>
CSS
div.w1h1 {
width: 150px;
height: 150px;
font-family:sans-serif;
background-color: #06849b;
}
a.userLink {
width: 150px;
height: 150px;
display: table-cell;
vertical-align:middle;
text-align:center;
color: #FFFFFF;
text-decoration: none;
}
演示于http://jsfiddle.net/yWLYV/1/
适用于IE8
