我正在尝试创建方形元素,它将使文本在垂直和水平方向上居中.此外,广场的整个区域应该是一个链接.这是我的
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
