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

As a homework I'm building a website, I built up this menu using a "table" and put an "a href" inside each "td". The problem is I can't figure out how to make the text written in the "a" inside the "td" vertically centered. Any ideas?

作为一个家庭作业,我正在建立一个网站,我使用“表”建立了这个菜单,并在每个“td”内放置一个“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>

2 个解决方案

#1

You should remove the inline style display:block;, because vertical-align only works on an inline or table-cell box.

您应该删除内联样式显示:block;,因为vertical-align仅适用于内联或表格单元格框。

Alternatively, you can use equal top and bottom padding for the <a> like this.

或者,你可以使用相同的顶部和底部填充这样的。

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

And remove all the inline styles from it.

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

Demo: http://jsfiddle.net/3nzkr8kx/1/

#2

I simplified your HTML since you had inline styles that could be handled by a CSS selector. Also, the display:block property should be removed to fix the vertical middle alignment.

我简化了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>

#1