Can't display hyperlink vertically in middle when it's in table cell and 'a' tag is display: block

Question

I have a hyperlink in display: block mode and it's placed in a table cell (td). The hyperlink text is showing at the top of the cell. Want it in the middle for all common browsers.

I am using a hover effect where the background color of the cell changes. The text position looks odd.

Answer 1

<table>
<tr>
<td style="vertical-align : middle;">
<a href="#" style="display : block"></a>
</td>
</tr>
</table>

Is this what you are looking for? Notice the "vertical-align : middle" in the cell style.

Answer 2

I used the solution from this page with some minor css modifications:

http://apptools.com/examples/tdcolor.php

Answer 3

You could try defining line-height for your a element

td a {line-height: 2em; /* other css */}

This should force the text to be vertically centred. Bearing in mind that, should the text wrap to a second line, you might end up with an undesired end-result.

Answer 4

Try this:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html