css bottom && center

[Jan Faerber]

With Mozilla

a)
<div style="position:absolute; top:80%; text-align:center"><a
href="...">------</a></div>
looks like

|--------------------------------------------|
| |
| |
| |
| |
| |
| ------ |
| |
|--------------------------------------------|

b)
<div style="text-align:center"><a href="...">------</a></div>
looks like

|--------------------------------------------|
| ------ |
| |
| |
| |
| |
| |
| |
|--------------------------------------------|

c)
What can I do that it looks like this when a) does not work?

|--------------------------------------------|
| |
| |
| |
| |
| |
| |
| ------ |
|--------------------------------------------|

 

[Lauri Raittila]

With Mozilla

a)
<div style="position:absolute; top:80%; text-align:center"><a
href="...">------</a></div>
looks like

[ASCII snipped, wants to have centered vertically]

Add
width: 100%;
or
left:0;right:0;

 

[Jonathan N. Little]

Jan Faerber wrote:

c)
What can I do that it looks like this when a) does not work?

|--------------------------------------------|
| |
| |
| |
| |
| |
| |
| ------ |
|--------------------------------------------|

To get (c) add 'width' to your divider like:

<div style="position:absolute; top:80%; text-align:center WIDTH: 100%"><a
href="...">------</a></div>

else your link will be centered with a DIV, but the DIV is only as wide
it needs to be, if you had added a border to your DIV it would have
looked like:
|--------------------------------------------|
| |
| |
| |
| |
| |
|+------+ |
||------| |
|+------+ |
|--------------------------------------------|

shows that the link is indeed centered within the DIV but nothing is
defined to center the DIV within its container...
or of course your could have the container, in this case the BODY center
its contents, but I do not think that is what you intended.

 

[Jan Faerber]

Lauri Raittila ... output:

With Mozilla

a)
<div style="position:absolute; top:80%; text-align:center"><a
href="...">------</a></div>
looks like

[ASCII snipped, wants to have centered vertically]

Why vertically?

Add
width: 100%;
or
left:0;right:0;

Yes, this works - thank you!
I understand - the div section has to be made wider.

 

[Jan Faerber]

Jonathan N. Little ... output:

shows that the link is indeed centered within the DIV but nothing is
defined to center the DIV within its container...
or of course your could have the container, in this case the BODY center
its contents, but I do not think that is what you intended.

Thank you for this explaination!
I don't know why it was not clear to me before but now I think I can predict
the behaviour of a browser much better.