Vertical align in block link?

Patrick

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>

Sep 19 '08 #1

Follow Post Reply

26782

Ben C

On 2008-09-19, Patrick <mo*@ici.lawrote:

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>

Sep 19 '08 #2

Patrick

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

On 2008-09-19, Patrick <mo*@ici.lawrote:
>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>

Sep 19 '08 #3

Jim Moe

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)

Sep 20 '08 #4

Jonathan N. Little

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

Sep 20 '08 #5

Patrick

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

Sep 20 '08 #6

Ben C

On 2008-09-19, Patrick <mo*@ici.lawrote:

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

Sep 20 '08 #7

Jim Moe

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)

Sep 20 '08 #8

Patrick

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

Sep 21 '08 #9

Vertical align in block link?

This discussion thread is closed

Similar topics