|
Posted by bmistiaen on 04/23/06 16:08
Hi,
I'm trying to create an anchor tag (link) with a height of 100px and a
width of 100px.
When the mouse is over it, i want the whole box (not just the link
text) to have a red background.
The problem is that i can't get the text in the anchor tag to vertical
align to the middle.
It is always on the top.
I know it could be done with the property line-height.
If you add "line-height: 100px;" to the a tag in the style
definitions, then the text is centered.
But what if you have 2 lines of text?
Then it doesn't work anymore.
Any ideas on how to do this?
Code:
<html>
<head>
<style>
a {
width: 100px;
height: 100px;
background-color: blue;
color: white;
border: 2px solid black;
text-align: center;
overflow: hidden;
}
a:link {
}
a:visited {
}
a:hover {
background-color: red;
}
a:active {
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" align="center"
height="95%">
<tr>
<td><a href="#">link01 this is a test link</a></td>
<td><a href="#">link02</a></td>
<td><a href="#">link03</a></td>
</tr>
</table>
</body>
</html>
Navigation:
[Reply to this message]
|