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: http://stackoverflow.com/questions/14862604/html-css-center-text-horizontally-and-vertically-in-a-link Setting the line-height worked for me, but has a few caveats. — MikeTeeVee, Jun 05 '14 at 15:42

score 0 · Answer 1 · answered Oct 23 '09 at 19:32

0

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

answered Oct 23 '09 at 19:32

That won't work. The link is taking the whole cell space because it's a block. So there's nothing to display in the middle. there's no 'air' to move things around. Try this test:

test

– Tony_Henrich Oct 23 '09 at 19:46

score 0 · Accepted Answer · answered Oct 23 '09 at 21:56

0

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

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

answered Oct 23 '09 at 21:56

Tony_Henrich

42,411
75
239
374

score 0 · Answer 3 · answered Oct 23 '09 at 23:09

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.

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

3 Answers3