Hi all,
I'm trying to put a text in the middle of the page using CSS. this is what I've done:

<divstyle="width: 100%; height: 100%; text-align: center; vertical-align: middle;">
jgjgjgj
</div>

what happens is that the text is in the aligned to the center, but it's not in the middle vertically. what am I doing wrong?

If you are using the doctype declaration at the beginning of your file, you can't assign a percentage height to your elements. Try removing the doctype declaration and seeing if it displays how you want it then.

Let me know.

vertical-align does not work as you are expecting.

It is only applicable to inline-elements and will align elements relative to the height of the content of the parent container

here is some demo code so you can see how it actually works;

<div style="border:1px solid orange;font-size:5em;height: 300px; text-align: center;">
Some text
<span style="border:1px solid orange;font-size:20px; text-align: center; vertical-align: middle;">
Some text in the middle
</span>
<span style="border:1px solid orange;font-size:10px; text-align: center; vertical-align: top;">
Some more text at the top
</span>
<br>
<span style="border:1px solid orange;font-size:20px; vertical-align: middle;">
Some text in the middle
</span>
</div>

BTW you don't need width:100% on divs they are a block element and are 100% wide by default.

if I remove it it indeed works.

the doc type I have is for xhtml:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

but I want to write w3 propper html code, and still it should look good on all resolutions in the center of the screen. what should I do?

Originally Posted by mellymell

If you are using the doctype declaration at the beginning of your file, you can't assign a percentage height to your elements.

Huh?

you can assign percentage heights to elements regardless of doctype.

you can refrence this post for vertical centering with CSS
http://www.webmaster-talk.com/html-f...v-div-css.html

To center horizontally, you need to do 2 things.

body{
text-align: center; /* for IE 6 and below */
}

Then on the div you want centered, a wrapper div if you want the whole thing centered, you add:

#wrapper{
width: xxxx;
margin: 0 auto; /* top-bottom, left/right values*/
}

Originally Posted by LadynRed

To center horizontally, you need to do 2 things.

body{
text-align: center; /* for IE 6 and below */
}

Then on the div you want centered, a wrapper div if you want the whole thing centered, you add:

#wrapper{
width: xxxx;
margin: 0 auto; /* top-bottom, left/right values*/
}

the problem is I don't know the width - it changes between different screens resolutions

So, you use a percentage.

Originally Posted by LadynRed

To center horizontally, you need to do 2 things.

body{
text-align: center; /* for IE 6 and below */
}

Then on the div you want centered, a wrapper div if you want the whole thing centered, you add:

#wrapper{
width: xxxx;
margin: 0 auto; /* top-bottom, left/right values*/
}

so what u actually want is

#wrapper {
height: 400px;
margin: auto 0px;
}

Nope, Because using auto for top and bottom does not affect the container position vertically.

so then that won't actually work, as it will just center horizontaly and not verticaly

I am not fantastic with CSS, however to align something vertically you will need these two properties:

display:table;
vertical-align:middle;

Add that to a layer acting as a 'wrapper' around the content and it should be aligned vertically.