[CSS] Div-Tag and Vertical Align

08-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

08-19-2006

Martin Pöpping wrote:

> I want the DIV Tag vertically centered, but it does not work.
>
> What do I do wrong?

http://www.w3.org/TR/CSS2/visudet.ht...vertical-align

What does the manual say it applies to?

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

08-19-2006

In article <ec839c$2cl$>,
Martin PÃ¶pping <> wrote:

> 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

08-19-2006

In article <ec839c$2cl$>,
Martin PÃ¶pping <> wrote:

> 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.

--
dorayme

08-21-2006

dorayme schrieb:

> 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

08-21-2006

dorayme wrote:

> 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>

08-22-2006

In article <ecd0kq$9gc$>,
Martin PÃ¶pping <> wrote:

> dorayme schrieb:
>
> > 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

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

--
dorayme

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
left align within centre align	Paul Lautman	HTML	3	03-03-2006 02:45 PM
text-align vs align	tshad	HTML	1	06-23-2005 10:29 PM
div and vertical align	Tobias Müller	HTML	2	11-25-2003 06:24 PM
vertical-align and div	Jochen Fuhrmann	HTML	1	10-06-2003 10:35 AM
how to Align text left & vertical align middle	Kay	ASP .Net	2	07-25-2003 08:32 AM