Can't display hyperlink vertically in middle when it's in table cell and 'a' tag is display: block
I have a hyperlink in display: b开发者_Python百科lock 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.
<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.
I used the solution from this page with some minor css modifications:
http://apptools.com/examples/tdcolor.php
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.
精彩评论