Vertical align in block link?

#1 (**permalink**) 09-23-2008, 01:42 AM

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?
Your advices are welcome.

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>

#2 (**permalink**) 09-23-2008, 01:42 AM

On 2008-09-19, Patrick <moi@ici.la> wrote:
> 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>

#3 (**permalink**) 09-23-2008, 01:42 AM

Le 19.09.2008 22:34, Ben C a écrit :
> On 2008-09-19, Patrick <moi@ici.la> wrote:
>> 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>

#4 (**permalink**) 09-23-2008, 01:42 AM

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)

#5 (**permalink**) 09-23-2008, 01:42 AM

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
http://www.LittleWorksStudio.com

#6 (**permalink**) 09-23-2008, 01:42 AM

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

#7 (**permalink**) 09-23-2008, 01:42 AM

On 2008-09-19, Patrick <moi@ici.la> wrote:
> Le 19.09.2008 22:34, Ben C a écrit :
>> On 2008-09-19, Patrick <moi@ici.la> wrote:
>>> 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.

#8 (**permalink**) 09-23-2008, 01:42 AM

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)

#9 (**permalink**) 09-23-2008, 01:42 AM

>>>> 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

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

		CSS & Stylesheet Forums > CSS Forumz: Main > Style Sheet In General
Vertical align in block link?

User Name		Remember Me?
Password