Vertical align in block link? 
September 19th, 2008, 05:15 PM
| | |
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> |
September 19th, 2008, 09:35 PM
| | | | re: Vertical align in block link?
On 2008-09-19, Patrick <moi@ici.lawrote: Quote:
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. Quote:
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>
| |
September 19th, 2008, 10:55 PM
| | | | re: Vertical align in block link?
Le 19.09.2008 22:34, Ben C a écrit : Quote:
On 2008-09-19, Patrick <moi@ici.lawrote: Quote:
>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? Quote:
> Quote:
>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>
| | |
September 20th, 2008, 02:55 AM
| | | | re: Vertical align in block link?
On 09/19/08 09:06 am, Patrick wrote: Quote:
>
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) |
September 20th, 2008, 03:15 AM
| | | | re: Vertical align in block link?
Jim Moe wrote: Quote:
On 09/19/08 09:06 am, Patrick wrote: Quote:
>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 |
September 20th, 2008, 10:25 AM
| | | | re: Vertical align in block link?
Le 20.09.2008 04:06, Jonathan N. Little a écrit : Quote:
Jim Moe wrote: Quote:
>On 09/19/08 09:06 am, Patrick wrote: Quote:
>>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 |
September 20th, 2008, 02:35 PM
| | | | re: Vertical align in block link?
On 2008-09-19, Patrick <moi@ici.lawrote: Quote:
Le 19.09.2008 22:34, Ben C a écrit : Quote:
>On 2008-09-19, Patrick <moi@ici.lawrote: Quote:
>>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. |
September 20th, 2008, 07:55 PM
| | | | re: Vertical align in block link?
On 09/20/08 02:20 am, Patrick wrote: Quote: Quote: Quote:
>>>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) |
September 21st, 2008, 06:25 PM
| | | | re: Vertical align in block link?
>>>I'm trying to align a text vertically in a link displayed as a block. Quote: Quote: Quote:
>>>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 |  |
| | |  /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 225,662 network members.
|
