Wed, 2005-07-06 09:56
hello, i'm new here and have a little question. i just created this small example - according to the idea, the #content div should be placed in the middle of the page (both horizontally and vertically). now horizontally it's fine, it's in the middle. but how come it doesn't align vertically as well? what am i missing here? i'm sure some of you could help here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> New Document </title>
<style type="text/css">
html, body
{
width: 100%;
height: 100%;
}
body
{
margin: 0;
}
#contain
{
display: table;
margin-left: auto;
margin-right: auto;
}
#content
{
display: table-cell;
vertical-align: middle;
border: 1px solid;
}
</style>
</head>
<body>
<div id="contain">
<div id="content">Hey ho</div>
</div>
</body>
</html>
Wed, 2005-07-06 10:06
#1
what am i missing? - vertical centering
Vertical-align is not meant to align block level elements. It's used to move inline elements, ie text to the top bottom or middle of it's line height.
Vertcle centering of entire pages is a bit more tricky. Try googling css centering or something.
I found this
http://www.quirksmode.org/css/centering.html
but I am sure there are more out there.
Wed, 2005-07-06 11:20
#2
what am i missing? - vertical centering
yes, i found that as well, but it uses tables. tables are meant to display data 'in tables' - just for that, but not for layouting. thus i would like to find out a solution to not use tables for layouts at all.
btw in that link, it still uses "vertical-align: middle" for the td (that is, table cell). what i did is similar, i made the div a "table-cell" (display: table-cell) and added "vertical-align: middle" property to it.
Wed, 2005-07-06 15:27
#3
what am i missing? - vertical centering
@Ree
Your code should work in modern browsers. IE is not a modern browser. You need a little hacking. Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
lang="en">
<head>
<meta name="generator"
content="
HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
<meta name="editor"
content="Emacs 21" />
<meta name="author"
content="Gary Turner" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>vertical centering</title>
<style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
}
#container {
display: table;
width: 500px;
height: 400px;
border: 1px solid black;
margin: 15px auto;
}
.inner {
position: relative;
width: 100%;
display: table-cell;
vertical-align: middle;
}
/* \*/
* html .inner {
top: 50%;
left: 0;
}
* html .inner p {
position: relative;
top: -50%;
}
/* */
/*]]>*/
</style>
</head>
<body>
<h1>V-Centering</h1>
<div id="container">
<div class="inner">
<p>v-centered text</p>
</div>
</div>
</body>
</html>You'll need to apply the hack for each block element within .inner.
Don't knock a simple un-nested table for solving difficult problems. One of the reasons for tables being introduced in html 3.2 was specifically for layout, though the potential problems were acknowledged.
cheers,
gary
Wed, 2005-07-06 19:26
#4
what am i missing? - vertical centering
kk5st wrote:
Your code should work in modern browsers.
actually, it doesn't work with Firefox. :? that's why i'm trying to find out what's wrong.
Thu, 2005-07-07 08:38
#5
what am i missing? - vertical centering
Ree wrote:
yes, i found that as well, but it uses tables. tables are meant to display data 'in tables' - just for that, but not for layouting. thus i would like to find out a solution to not use tables for layouts at all.
btw in that link, it still uses "vertical-align: middle" for the td (that is, table cell). what i did is similar, i made the div a "table-cell" (display: table-cell) and added "vertical-align: middle" property to it.
Good lord so it does, that'll learn me to not read the links properly :oops:
Thu, 2005-07-07 17:13
#6
what am i missing? - vertical centering
hm, any ideas why my code doesn't work as it should?
Fri, 2005-07-08 00:11
#7
what am i missing? - vertical centering
Did you even look at the code I posted? It uses display: table/table-cell; for modern browsers and supplies a hack for IE. It does work.
gary
Fri, 2005-07-08 05:54
#8
what am i missing? - vertical centering
yes, i did, and you use fixed size, which isn't there in MY code. also you said
YOUR code should work in modern browsers.
and it doesn't. i never intended to use fixed size boxes in this case - and my question was just that - how it should be done with no fixed size elements.
Fri, 2005-07-08 06:32
#9
what am i missing? - vertical centering
Ree wrote:
yes, i found that as well, but it uses tables. tables are meant to display data 'in tables' - just for that, but not for layouting. thus i would like to find out a solution to not use tables for layouts at all.
Did you check out the link to this which is in the top right corner of the page Briski posted? Seems like it could be what you're looking for.
Fri, 2005-07-08 08:25
#10
what am i missing? - vertical centering
Ree wrote:
yes, i did, and you use fixed size, which isn't there in MY code. also you said
YOUR code should work in modern browsers.
and it doesn't. i never intended to use fixed size boxes in this case - and my question was just that - how it should be done with no fixed size elements.
Yours did work as coded. A table is very efficient. Unless otherwise specified, it uses exactly the width and height it needs for the content. So for what you coded, it made a table just large enough for the cell that was just large enough for the text, and the whole thing was placed as high and left as it could go in the flow.
My example gave sizes because if you don't want a table to cinch up around its content, you have to. Just size the thing the way you want it. If you don't understand why your code doesn't work as expected and you're given code that has, say, dimensioning, doesn't it make sense to ask why the difference?
html, body {
margin: 0;
padding: 0;
height: 100%; /*because you have to have a reference for
#container's % height/*
}
#container {
display: table;
height: 100%;
width: 100%;
}
#content {
display: table-cell;
vertical-align: middle;
position: relative; /* needed for IE hack */
width: 100%; /* " " */
}
p {
text-align: center;
}
---------------
<div id="container">
<div id="content">
<p>centered text</p>
</div>
</div>gary
Fri, 2005-07-08 08:38
#11
what am i missing? - vertical centering
i know you're trying to help, but all your examples use fixed size boxes. in my code you can see there are none of these. is there a way to center content vertically AND horizontally in css when i don't know exact size of the element being centered? it's really a very simple question. please don't ignore doctype - it's 'strict' and is there for purpose. if i made a mistake or didn't include anything, please point that out, but also please check what the question is before replying. i hope it's all clear now.
Fri, 2005-07-08 08:53
#12
what am i missing? - vertical centering
Ree wrote:
For god's sake! Have you not even tried my code? There is no, none, not any, nor even any mention of size in the centered content. The containers do have dimension just because they must. What are you centering against if there is no reference?
i know you're trying to help, but all your examples use fixed size boxes. in my code you can see there are none of these. is there a way to center content vertically AND horizontally in css when i don't know exact size of the element being centered? it's really a very simple question. please don't ignore doctype - it's 'strict' and is there for purpose. if i made a mistake or didn't include anything, please point that out, but also please check what the question is before replying. i hope it's all clear now.
Show me how you've used my code and not got what you want. Do that, and I can help you modify it as needed. Otherwise, I'm done with this thread.
gary
Sun, 2005-07-10 09:10
#13
what am i missing? - vertical centering
kk5st: your post got in front of mine when i replied... your first example - it centers text inside a box which isn't centered. now your second example does indeed center the text in the middle of the body. that's fine. but what if i wanted to center a div (or even more importantly multiple divs, for example one next to another (both floated to the same direction or with absolute positions indicated))? that's why actually in my first example i used <div> instead of a <p> for the text as you did in your second example, divs are the most important for me right now. have a look at the below css and html code:
html, body
{
margin: 0;
width: 100%;
height: 100%;
}
#menu, #page
{
border: 1px solid #C4DBE1;
background-color: #E1EDF0;
}
body
{
background-color: #E6E6E6;
font-family: verdana;
font-size: 1em;
}
#content
{
position: relative;
margin: 0 auto;
width: 760px;
height: 460px;
}
#menu
{
position: absolute;
top: 0;
left: 0;
width: 160px;
height: 420px;
padding: 20px;
font-size: 0.8em;
text-align: left;
}
#page
{
position: absolute;
top: 0;
left: 210px;
width: 500px;
height: 400px;
padding: 30px;
font-size: 0.7em;
text-align: center;
}
<div id="content">
<div id="menu"><?php include('menu.php'); ?></div>
<div id="page"><?php SwitchPage(); ?></div>
</div>
this makes my divs centered horizontally well. is there a way to center them both (those inside 'content') vertically as well? vertical-align: middle doesn't seem to work here...
Sun, 2005-07-10 15:27
#14
what am i missing? - vertical centering
Everything just drops into place. Notice the .holder divs. I used them as wrappers for the content. They're only needed because of IE. Study the code. It's a method that can be used any number of places.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
lang="en">
<head>
<meta name="generator"
content="
HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
<meta name="editor"
content="Emacs 21" />
<meta name="author"
content="Gary Turner" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>vertical centering of content</title>
<style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
}
body {
color: black;
background-color: #e6e6e6;
font: 100% verdana, sans-serif;
}
p {
font-size: 1em;
}
#wrapper{
position: relative;
width: 760px;
height: 460px;
margin: 0 auto;
}
#menu {
position: absolute;
display: table;
height: 420px;
width: 160px;
padding: 20px;
top: 0;
left: 0;
}
#main {
position: absolute;
display: table;
height: 400px;
width: 500px;
padding: 30px;
top: 0;
left: 210px;
}
#menu, #main {
background-color: #e1edf0;
border: 1px solid #c4dbe1;
}
.inner {
position: relative; /*needed for IE hack*/
display: table-cell;
width: 100%;
vertical-align: middle;
}
/* IE hack */
/* \*/
* html .inner {
top: 50%;
left: 0;
}
* html .inner .holder {
position: relative;
top: -50%;
}
/* */
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<div class="inner">
<div class="holder">
<!-- div required because of IE -->
<p>Put everything that belongs in the main area inside
the .holder div.</p>
<p>Another paragraph to expand the content</p>
<p>And, another.</p>
</div><!-- end holder -->
</div><!-- end inner -->
</div><!-- end main -->
<div id="menu">
<div class="inner">
<div class="holder">
<!-- div required because of IE -->
<p>text</p>
</div><!-- end holder -->
</div><!-- end inner -->
</div><!-- end menu -->
</div><!-- end wrapper -->
</body>
</html>cheers,
gary
Mon, 2005-07-11 07:07
#15
what am i missing? - vertical centering
gary, you centered content inside divs. but what i was asking is - how can i center the divs themselves? that is, #menu and #page - those are contained by #content. how can i make those appear centered vertically?
Mon, 2005-07-11 08:02
#16
what am i missing? - vertical centering
This is getting a little ridiculous, Ree. You're not doing anything toward helping yourself. I told you to study the code and learn how it works. I gave you three working versions all using the same code. Just move the styles around. You can't center the actual #menu and #main (my nomenclature) because they're the same height as the #wrapper. The .holder divs are centered. This fourth variation moves the bg color and border to the .holder divs.
Emend this;#menu, #main {}
and add this;
.holder {
background-color: #e1edf0;
border: 1px solid #c4dbe1;
} That's it for me.
gary
Mon, 2005-07-11 09:07
#17
what am i missing? - vertical centering
sorry for bothering you all but can someone give me the simplest example how to center a picture for example onlly using css ?
Mon, 2005-07-11 09:14
#18
what am i missing? - vertical centering
Have you even read this thread?
Mon, 2005-07-11 09:22
#19
what am i missing? - vertical centering
BreakBD,
would you please read the forum posting guidelines then start a new topic, thankyou.
Ree,
KK5st has endeavored to help you with some very detailed help and is amongst the more experienced members of the forum when it comes to CSS, even if you feel that he has perhaps not addressed quite the problem you were referring to would you please respect the fact that he is trying to help you and also that his time and help is given freely and is unpaid as is all of ours.
I would suggest that you go back and re-read the advice that he has given in more detail.
Hugo. (Mod)
Mon, 2005-07-11 10:14
#20
what am i missing? - vertical centering
yes, now i see where my mistake was, it's that same vertical-align. for some reason while lookig at my code i thought it makes the div itself (that has this property) aligned, not its contents... so what i did is made <body> a table and added a new div (table-cell) with vertical-align: middle to contain the #content div. now the whole stuff aligns both horizontally and vertically very well. yeah, that silly mistake cost me quite a bit of time actually. i guess i should thank you, gary, for the time you have put into this thread 
(just i was sure you didn't get what i wanted to know at that time 
). thanks!
html, body
{
margin: 0;
width: 100%;
height: 100%;
}
#menu, #page
{
border: 1px solid #C4DBE1;
background-color: #E1EDF0;
}
body
{
background-color: #E6E6E6;
font-family: verdana;
font-size: 1em;
display: table;
}
#container
{
display: table-cell;
vertical-align: middle;
}
#content
{
position: relative;
margin: 0 auto;
width: 744px;
height: 462px;
}
#menu
{
position: absolute;
top: 0;
left: 0;
width: 160px;
height: 420px;
padding: 20px;
font-size: 0.8em;
text-align: left;
}
#page
{
display: table;
position: absolute;
top: 0;
left: 210px;
width: 500px;
height: 420px;
padding: 20px;
font-size: 0.7em;
text-align: center;
}
<div id="container">
<div id="content">
<div id="menu"><?php include('menu.php'); ?></div>
<div id="page"><?php SwitchPage(); ?></div>
</div>
</div>
just one little request - if it's actually possible to make the above shorter (fewer code), that would be greatly appreciated.
btw, i very much like the fact that it works with strict doctype 
thanks again!