[CSS] Div-Tag and Vertical Align

Guest · Aug 19, 2006

Hello,

IÂ´ve a problem with a simple DIV Tag.

It looks like this:

div#border{
height: 600px;
left: 188px;
width: 410px;
vertical-align: middle;
border: solid 1px #526e86;
}

and the HTML-Page:

<html>
<head>
<link type="text/css" href="./css/styles2.css" rel="stylesheet">

</head>

<body>
<div id="border">bla</a>
</body>
</html>

I want the DIV Tag vertically centered, but it does not work.

What do I do wrong?

Regards,

Martin

David Dorward · Aug 19, 2006

Martin said:
I want the DIV Tag vertically centered, but it does not work.

What do I do wrong?

http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

What does the manual say it applies to?

dorayme · Aug 19, 2006

Martin PÃ¶pping said:
I want the DIV Tag vertically centered, but it does not work.

Divs are 100% wide in relation to their containers (eg. body) by
default. So if you want one centred, you need to give it a width
smaller than the container in which you want it to appear but big
enough to hold the content that is inside it (this needs careful
though often). Then you need to instruct it to centre. This
usually works:

margin-left: auto;
margin-right: auto

dorayme · Aug 19, 2006

Martin PÃ¶pping said:
I want the DIV Tag vertically centered, but it does not work.

oops... I misread... my last was about side to side centering. I
don't know anything about vertical anything, I never ever think
about vertical anything... it frightens me.

Guest · Aug 21, 2006

dorayme said:
Divs are 100% wide in relation to their containers (eg. body) by
default. So if you want one centred, you need to give it a width
smaller than the container in which you want it to appear but big
enough to hold the content that is inside it (this needs careful
though often). Then you need to instruct it to centre. This
usually works:

margin-left: auto;
margin-right: auto

Thanks for your hint!
IÂ´m half ready now

My code as smallest example looks like this:

<html>
<head>

<title>TEST</title>

<style type="text/css">

</style>

</head>

<body>
<div id="content"> </a>
</body>

</html>

How can I center it horizontally?

E.g. I want it centered in the middle of the page like this:

--------------------------------------
| |
| |
| |---------| |
| | DIV | |
| |---------| |
| |
| |
|-------------------------------------|

Regards,

Martin

=?ISO-8859-15?Q?Martin_P=F6pping?= · Aug 21, 2006

dorayme said:
Divs are 100% wide in relation to their containers (eg. body) by
default. So if you want one centred, you need to give it a width
smaller than the container in which you want it to appear but big
enough to hold the content that is inside it (this needs careful
though often). Then you need to instruct it to centre. This
usually works:

margin-left: auto;
margin-right: auto

Thanks for your help!

I have combined working example now but it uses the table-tag.

Does anybody know a solution taking the same effects only with using div
and without using a table tag?

Regards,

Martin

<html>
<head>

<title>TEST</title>

<style type="text/css">


</style>

</head>

<body>
<table>
<tr>
<td>
<div id="container"> </a>
</td>
</tr>
</table>
</body>

</html>

dorayme · Aug 22, 2006

Martin PÃ¶pping said:
Thanks for your hint!
IÂ´m half ready now

Will be able to look tomorrow... but have you tried applying the
above advice to height too?

Positioning CSS components	1	Nov 16, 2023
Align img inside nav tabs section	5	Dec 29, 2023
Stuck with html and css	25	Dec 14, 2022
CSS: How can I stop overflow on the y-axis?	2	Dec 24, 2022
Please Help?	0	Jul 23, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Interfering CSS	1	Feb 9, 2024
Buttons lining up	1	Feb 6, 2022

[CSS] Div-Tag and Vertical Align

Guest

David Dorward

dorayme

dorayme

Guest

=?ISO-8859-15?Q?Martin_P=F6pping?=

dorayme

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads