Posted by Ben C on 06/12/07 21:55

On 2007-06-12, vunet.us@gmail.com <vunet.us@gmail.com> wrote:
> On Jun 12, 5:33 pm, Ben C <spams...@spam.eggs> wrote:
>> On 2007-06-12, vunet...@gmail.com <vunet...@gmail.com> wrote:
>>
>> > On Jun 12, 4:50 pm, Ben C <spams...@spam.eggs> wrote:
>> >> On 2007-06-12, vunet...@gmail.com <vunet...@gmail.com> wrote:
>>
>> >> > and text of a link is in the middle centered... thannks
>>
>> >> Set vertical-align: middle on the td.
>>
>> > what if I set display:block; for A?
>>
>> Yes you can do that but then it's going to be harder to get the text of
>> the link vertically centered.
>>
>> If the text can be guaranteed to be all on one line you can set a
>> line-height on the <a> equal to the height you've set as well as setting
>> vertical-align: middle on it.
>>
>> If you want text that breaks across lines but to have those lines
>> centered vertically in their container, you need a table-cell with
>> vertical-align: middle. Nothing else has quite the same behaviour. For
>> this reason it's desirable to keep your <a> inline and directly inside a
>> table cell.
>>
>> You said you wanted your <a> width:100% and height:100% so it may well
>> be there's no point in making it display: block when it completely fills
>> the table cell anyway. Just decorate the table cell instead and leave
>> the <a> as inline.
>
> I am trying to create a button with a cursor:hand which actually is a
> cell with a link. That's why I wanted to expand the A. How would you
> suggest to go about this idea of mine? I hate using images for that
> reason. Thanks

I'm not sure where you got cursor:hand from. I can find cursor:pointer
in the CSS 2.1 spec and various other values for cursor, but not hand.

How about this:

<style type="text/css">
td
{
height: 200px;
width: 200px;
background-color: green;
}

a { display: block; }

.button
{
display: block; /* it's a span, so it can be
validly put inside an <a> */
width: 150px;
height: 100px;
border: 8px outset gray;
background-color: gray;
color: white;

margin: 0 auto; /* to centre it vertically */

line-height: 100px; /* to centre its contents
vertically */
vertical-align: middle;
white-space: nowrap; /* but its contents can't wrap */

text-align: center; /* centre contents horizontally */
}
.button:hover { cursor: pointer; }
</style>

...

<table>
<tr>
<td>
<a href="#">
<span class="button">Press Me</span>
</a>
</td>
</tr>
</table>

[Back to original message]