20 replies [Last post]
Ree
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2005-07-06
Posts: 18
Points: 0

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>

briski
briski's picture
Offline
Elder
London
Last seen: 7 years 18 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

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.

Ree
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2005-07-06
Posts: 18
Points: 0

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ree
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2005-07-06
Posts: 18
Points: 0

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.

briski
briski's picture
Offline
Elder
London
Last seen: 7 years 18 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

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:

Ree
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2005-07-06
Posts: 18
Points: 0

what am i missing? - vertical centering

hm, any ideas why my code doesn't work as it should?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ree
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2005-07-06
Posts: 18
Points: 0

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ree
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2005-07-06
Posts: 18
Points: 0

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

what am i missing? - vertical centering

Ree wrote:
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.
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?

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ree
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2005-07-06
Posts: 18
Points: 0

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ree
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2005-07-06
Posts: 18
Points: 0

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?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

BreakBD
BreakBD's picture
Offline
Enthusiast
Last seen: 12 years 25 weeks ago
Joined: 2005-07-07
Posts: 68
Points: 0

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 ?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

what am i missing? - vertical centering

Have you even read this thread?

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ree
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2005-07-06
Posts: 18
Points: 0

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 Smile (just i was sure you didn't get what i wanted to know at that time Tongue). 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 Laughing out loud

thanks again!