Vertically Align Text

Forum Moderators: not2easy

Message Too Old, No Replies

Vertically Align Text

eternal

1:23 pm on Oct 26, 2004 (gmt 0)

For some reason the text contained in my cells will not vertically align to the middle?
I am using the following CSS to make the cell roll over to a diferent color. When I take out display:block; the text is middle valigned but I need that property so the whole cell will change background color> Please can someone help me out.

----
td.link {
height: 22px;
}
td.link a {
display: block;
height: 22px;
text-decoration: none;
color: #000000;
}
td.link a:hover {
background: #339900;
}
----

Thanks.

BlobFisk

1:26 pm on Oct 26, 2004 (gmt 0)

Try:

td.link {
height: 22px;
vertical-align: middle;
}

eternal

2:36 pm on Oct 26, 2004 (gmt 0)

Nope I tried that but that doesnt have any effect!

BlobFisk

2:44 pm on Oct 26, 2004 (gmt 0)

Have you tried adding it to the a:link a:hover rules also?

encyclo

2:56 pm on Oct 26, 2004 (gmt 0)

I've managed to do it with this (height increased to 60px to make it clearer in the example):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title></title>
<style type="text/css">
td.link {
[b]height:60px;[/b]
}
td.link a {
display: block;
[b]height:20px;
padding:20px 0;[/b]
text-decoration: none;
color: #000000;
}
td.link a:hover {
background: #339900;
} 
</style>
<table border="1" width="50%">
<tr>
<td class="link"><a href="/">text</a></td>
<td>text</td>
</tr>
</table>

I'm still not sure why the link text sticks to the top, though.

eternal

6:25 pm on Oct 26, 2004 (gmt 0)

Yea but that doesnt really solve my problem because the cell needs to be 22px high?

encyclo

7:05 pm on Oct 26, 2004 (gmt 0)

that doesnt really solve my problem because the cell needs to be 22px high?

It does if you're using a fixed pixel size for your text: for example, if you are using 12px text, then your line-height can be 12px too, and your top and bottom padding would be 5px each.

I only made it 60 pixels to better demonstrate the effect on the test page - all you have to do is adjust to your situation.

eternal

8:31 pm on Oct 26, 2004 (gmt 0)

Yes, sorry I didnt apply the line height.

Just one thing tho, the background of the cell doesnt roll over when the cursor is there .. the cell rolls over only if the text is selected. Is there a way to make it more like this:

eternal

8:34 pm on Oct 26, 2004 (gmt 0)

Actually Ive just discovered that Opera, Netscape, Mozilla all roll over the background anywhere in the cell but only IE doesnt?