By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,453 Members | 937 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,453 IT Pros & Developers. It's quick & easy.

Vertical align in block link?

P: n/a
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
Share this Question
Share on Google+
8 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
>>>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.