CODEWITHSUNDEEP
htmlcssresponsive-design
HellixS
HellixS

Reputation: 27

Can't make link inside td vertically centered

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?

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>

Upvotes: 1

Views: 503

Answers (2)

Stickers
Stickers

Reputation: 78786

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

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/

Upvotes: 2

Cameron Tinker
Cameron Tinker

Reputation: 9789

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. 

.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>

Upvotes: 0

Related Questions