Wed, 2004-04-21 15:30
I am trying to create squares boxes that contain a text link using CSS.
This is the CSS I am using.
#link1 a{ font: bold 14px/18px Arial, Helvetica, sans-serif;
color: white;
display:block; vertical-align: middle;
width: 100px; height: 100px;
text-decoration:none; background-color: #88CC55;
}
#link1 a:hover{ background-color: #0099CC;
}
You can see the results at http://www.tgscomm.com. The link " About TGS" I want to be centered (vertically as well as horizontally) in the green box. vertical-align: middle doesn't seem to do it. Any ideas?
Tom
Wed, 2004-04-21 16:04
#1
Centering text in display block links
Hi
You can only style to be vertically centered by using padding etc.
Trevor
Wed, 2004-04-21 16:36
#2
Using tables for nav bar
Can you change the background color of a TD when you hover over the link it contains using CSS?
Also can you center the text vertically in each TD?
Wed, 2004-04-21 21:09
#3
Centering text in display block links
Hi
Can't see why not.
Never tried it.
You would just add a onmouseover="this.style.class='myhoverclass'" to the td tag. I guess. Wouldn't affect the border though, coz the border isn't part of the element (that is, the mouse over the border wouldn't cause the hover event, it would have to be over the cell itself).
So you might want the border set to 0.
Trevor