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> 8  27075 
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>
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>
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)
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
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
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.
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)
>>>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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Markus Ernst |
last post by:
Hi
I have a strange problem with vertical-align. The case can be viewed at
http://www.brainput.info/geschichte.html.
HTML code:
<div id="bild"><img src="geschichte.gif" width="274"...
|
by: Felipe Gasper |
last post by:
I'm trying to make some "sub-cells" in an HTML table and to control
their positioning and content presentation via CSS. In the table at
the following URL:
...
|
by: smr78 |
last post by:
Hi,
Up to now, I didn't find a solution to align text in the middle of a inline
neither block box in the vertical direction. That's because the
vertical-align property is not active for many...
|
by: chris_culley |
last post by:
Hi,
I'm fairly new to using css, and have been using it to format a
vertical navigation bar on my website, producing a load of buttons on
top of each other, each with a (151 * 33 px) gif as the...
|
by: tradmusic.com |
last post by:
Sorry to re-post, but my original post didn't seem to appear. Here it is
again:
I am experimenting with a roll-over but am struggling to get the text to
align, vertically, in the middle:
...
|
by: acunnon |
last post by:
I am trying to put together an login page my problem is getting the three items aligned to the middle verticaly without specifing a height to anything on the page.
CSS
html{
height:100%;...
|
by: Bill |
last post by:
Hi
How can I have IE7 act correctly on that ?
The rules make the link text go down when hovered. It works in FF , I had to
add a hard space right after the LI tag to have OP9 work but I can't...
|
by: Dave Rado |
last post by:
Hi
See my mock-up at http://tinyurl.com/35tv29. The three icons are
supposed to be vertically aligned on their bottoms (using "vertical-
align: bottom"), but they aren't, they're vertically...
|
by: maya |
last post by:
hi,
how do I get text to vertical-align inside a div?
http://www.mayacove.com/misc/home.html
vertical-align should work, according to this:...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: ryjfgjl |
last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
| |
