469,306 Members | 1,903 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,306 developers. It's quick & easy.

Vertical align in block link?

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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by Markus Ernst | last post: by
2 posts views Thread by Felipe Gasper | last post: by
reply views Thread by smr78 | last post: by
2 posts views Thread by tradmusic.com | last post: by
13 posts views Thread by Bill | last post: by
8 posts views Thread by Dave Rado | last post: by
40 posts views Thread by maya | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Geralt96 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.