Question

作为一个家庭作业，我正在建立一个网站，我使用“表格”建立了这个菜单，并在每个“td”内放置一个“a href”。问题是我无法弄清楚如何使文本写在“td”里面的“a”垂直居中。有什么想法吗？

CSS：

.men {
    width: 100%;
    height: 5vw;
    border: 3px white solid;
    border-width: 3px 0px;
    border-color: aliceblue;
}

td{
    width: 25%;
    vertical-align: middle;
    text-align: center;
    color: aliceblue;
    font-family: Arial;
    font-size: 2vw;
}

a{
    color: aliceblue;
    height: 100%;
    vertical-align: middle;
}

a:hover{
    color: #2f2f2f;
    background-color: aliceblue; 
}

<table class="men">
    <tr>
        <td><a href="http://i.imgur.com/zxl58Pv.jpg?1" style="display:block;width:100%;height:100%;text-decoration:none;">MUSEI</a></td>
        <td><a href="http://i.imgur.com/zxl58Pv.jpg?1" style="display:block;width:100%;height:100%;text-decoration:none;">COMPITI</a></td>
        <td><a href="http://i.imgur.com/zxl58Pv.jpg?1" style="display:block;width:100%;height:100%;text-decoration:none;">PAGINE PERSONALI</a></td>
        <td><a href="http://i.imgur.com/zxl58Pv.jpg?1" style="display:block;width:100%;height:100%;text-decoration:none;">CONTATTI</a></td>
    </tr>
</table>

Answer 1

您应该删除内联样式display:block;，因为vertical-align仅适用于inline或table-cell框。

或者，您可以像padding一样使用相同的顶部和底部<a>。

td a {
  display: block;
  padding: 1vw 0;
  text-decoration: none;
}

并从中删除所有内联样式。

演示：http://jsfiddle.net/3nzkr8kx/1/

Answer 2

我简化了HTML，因为你有可以由CSS选择器处理的内联样式。此外，应删除display:block属性以修复垂直中间对齐。

.men {
    width: 100%;
    height: 5vw;
    border: 3px white solid;
    border-width: 3px 0px;
    border-color: aliceblue;
}

td {
    width: 25%;
    vertical-align: middle;
    text-align: center;
    color: aliceblue;
    font-family: Arial;
    font-size: 2vw;
}

a {
    color: aliceblue;
    width:100%;
    height:100%;
    text-decoration:none;
}

a:hover {
    color: #2f2f2f;
    background-color: aliceblue; 
}

<table class="men">
    <tr>
        <td><a href="http://i.imgur.com/zxl58Pv.jpg?1">MUSEI</a></td>
        <td><a href="http://i.imgur.com/zxl58Pv.jpg?1">COMPITI</a></td>
        <td><a href="http://i.imgur.com/zxl58Pv.jpg?1">PAGINE PERSONALI</a></td>
        <td><a href="http://i.imgur.com/zxl58Pv.jpg?1">CONTATTI</a></td>
    </tr>
</table>

无法使td内的链接垂直居中

2 个答案: