Vertical align in block link?

**Ben C** · Sep 19 '08, 08:35 PM

Re: Vertical align in block link?

On 2008-09-19, Patrick <moi@ici.lawrot e:

Hello,
>
I'm trying to align a text vertically in a link displayed as a block.
But the text is always at top.
Is there a solution?

Just remove height: 100% from the A and it will be vertically centered
in the table cell.

Here is a test page:
>
><html>
><head>
><style>
a {
display: block;
height: 100%; text-align: center;
vertical-align: middle;
}
a:hover {
background: #fee;
}
></style>
></head>
><body>
><table width="100%" height="100%">
<tr>
<td valign="middle" ><a href="#a">a</a></td>
<td valign="middle" ><a href="#b">b</a></td>
</tr>
></table>
></body>
></html>

**Patrick** · Sep 19 '08, 09:55 PM

Re: Vertical align in block link?

Le 19.09.2008 22:34, Ben C a écrit :

On 2008-09-19, Patrick <moi@ici.lawrot e:

>Hello,
>>
>I'm trying to align a text vertically in a link displayed as a block.
>But the text is always at top.
>Is there a solution?

>
Just remove height: 100% from the A and it will be vertically centered
in the table cell.

Yes but I want the whole block to be clickable as a link, from the top
to the bottom of the screen.

Other ideas please?

>

>Here is a test page:
>>
><html>
><head>
><style>
>a {
> display: block;
> height: 100%; text-align: center;
> vertical-align: middle;
>}
>a:hover {
> background: #fee;
>}
></style>
></head>
><body>
><table width="100%" height="100%">
> <tr>
> <td valign="middle" ><a href="#a">a</a></td>
> <td valign="middle" ><a href="#b">b</a></td>
> </tr>
></table>
></body>
></html>

**Jim Moe** · Sep 20 '08, 01:55 AM

Re: Vertical align in block link?

On 09/19/08 09:06 am, Patrick wrote:

>
I'm trying to align a text vertically in a link displayed as a block.
But the text is always at top.
Is there a solution?
>

There is no general solution for vertically aligning objects.
For special cases where the text is fixed in length two methods are common.
1. Set the line-height to fill the space.
2. Adjust either the top margin or padding.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

**Jonathan N. Little** · Sep 20 '08, 02:15 AM

Re: Vertical align in block link?

Jim Moe wrote:

On 09/19/08 09:06 am, Patrick wrote:

>I'm trying to align a text vertically in a link displayed as a block.
>But the text is always at top.
>Is there a solution?
>>

There is no general solution for vertically aligning objects.
For special cases where the text is fixed in length two methods are common.
1. Set the line-height to fill the space.
2. Adjust either the top margin or padding.
>

It would have to be padding if you set the link to display: block, the
margin would not be the "clickable" part.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

**Patrick** · Sep 20 '08, 09:25 AM

Re: Vertical align in block link?

Le 20.09.2008 04:06, Jonathan N. Little a écrit :

Jim Moe wrote:

>On 09/19/08 09:06 am, Patrick wrote:

>>I'm trying to align a text vertically in a link displayed as a block.
>>But the text is always at top.
>>Is there a solution?
>>>

> There is no general solution for vertically aligning objects.
> For special cases where the text is fixed in length two methods are
>common.
>1. Set the line-height to fill the space.
>2. Adjust either the top margin or padding.
>>

>
It would have to be padding if you set the link to display: block, the
margin would not be the "clickable" part.

Thanks for the help. I tried to set height: 50%; padding-top: 50%;
It works more or less in Firefox but not Konqueror (block is only half
height, text not vertically centered).

Is there really no solution (even not pure CSS, I don't care) working
for most browsers?

--
Patrick

**Ben C** · Sep 20 '08, 01:35 PM

Re: Vertical align in block link?

On 2008-09-19, Patrick <moi@ici.lawrot e:

Le 19.09.2008 22:34, Ben C a écrit :

>On 2008-09-19, Patrick <moi@ici.lawrot e:

>>Hello,
>>>
>>I'm trying to align a text vertically in a link displayed as a block.
>>But the text is always at top.
>>Is there a solution?

>>
>Just remove height: 100% from the A and it will be vertically centered
>in the table cell.

>
Yes but I want the whole block to be clickable as a link, from the top
to the bottom of the screen.
>
Other ideas please?

It's not easy.

You could set a big line-height on the A (and no need to set
vertical-align: middle).

But you can't do that because you want "100%", not some known value, and
line-height: 100% doesn't mean 100% of the containing height but 100% of
the font size.

Display: table-cell on the A is another option, but won't work in IE.
You could put a span inside the A and offset it with position: relative
and top: 50%, but it won't be quite centered unless you move it up again
by half its font-size.

You could fake it with Javascript-- centre the A but give the table cell
a click handler.

**Jim Moe** · Sep 20 '08, 06:55 PM

Re: Vertical align in block link?

On 09/20/08 02:20 am, Patrick wrote:

>>>I'm trying to align a text vertically in a link displayed as a block.
>>>But the text is always at top.
>>>Is there a solution?
>>>>
>> There is no general solution for vertically aligning objects.
>> For special cases where the text is fixed in length two methods are
>>common.
>>1. Set the line-height to fill the space.
>>2. Adjust either the top margin or padding.
>>>

>
Thanks for the help. I tried to set height: 50%; padding-top: 50%;
It works more or less in Firefox but not Konqueror (block is only half
height, text not vertically centered).
>

Use "line-height", not "height".

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

**Patrick** · Sep 21 '08, 05:25 PM

Re: Vertical align in block link?

>>>I'm trying to align a text vertically in a link displayed as a block.

>>>But the text is always at top.
>>>Is there a solution?
>>Just remove height: 100% from the A and it will be vertically centered
>>in the table cell.

>Yes but I want the whole block to be clickable as a link, from the top
>to the bottom of the screen.

>
It's not easy.
>
You could set a big line-height on the A (and no need to set
vertical-align: middle).
>
But you can't do that because you want "100%", not some known value, and
line-height: 100% doesn't mean 100% of the containing height but 100% of
the font size.
>
Display: table-cell on the A is another option, but won't work in IE.
You could put a span inside the A and offset it with position: relative
and top: 50%, but it won't be quite centered unless you move it up again
by half its font-size.
>
You could fake it with Javascript-- centre the A but give the table cell
a click handler.

Thanks for the help :-)
The solution with
<span style="position : relative; top: 50%">
works well in Firefox and IE (but not in my version of Konqueror, maybe
a bug).
I'll go with that one.

--
Patrick

Vertical align in block link?

Vertical align in block link?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment