Vertical-align: Middle -- Doesn't Seem To Work

[jessy2010]

Hi, My page is here: 'http://www.willissinclair.com/090525.php'.I want the tan area to be centered on the navy background. I have tried wrapping the tan table in a div and setting vertical-align to middle, but that doesn't seem to make a difference. Here is my css:

body { background: #000021; color: #000021; vertical-align: middle; text-align: center; height: 100%; min-height: 600px; }h2 { font-family: Copperplate Gothic Light, Georgia, sans; text-align: center; margin-top: 0px; }h3 { font-family: Copperplate Gothic Light, Georgia, sans; text-align: center; font-size: 17px; }/* table { width: 1000px; border: 0px; } */img { border: 0px; }* html body { /*IE6 hack */ padding-right: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; /*Set value to (0 0 0 0} */ }#center { text-align: center; }#div { vertical-align: middle; text-align: center; margin: auto; padding-top: 8px; height: 100%; min-height: 600px; }#table { text-align: center; vertical-align: center; border: 0px; height: 600px; width: 1000px; background: #c5ba8e; }.return { font-size: 12px; color: #000021; font-weight: normal; font-family: Georgia; }.footer { font-size: 10px; color: #000021; font-weight: bold; font-family: Georgia; }.portfolio { font-size: 16px; margin-bottom: 30px; font-family: Copperplate Gothic Light, Georgia, sans; }.tdheader { width: 1000px; height: 100px; }.tdmain { width: 1000px; height: 475px; }/* slideshow styles */dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; }#menulist { position: static; /* Menu position that can be changed at will */ vertical-align: middle; }#menulist { width: 109px; padding-left: 0px; left: 0px; }#menulist dt { margin: 0px; height: 50px; line-height: 50px; text-align: center; font-weight: bold; background: #c5ba8e; font-family: Copperplate Gothic Light, Georgia, sans; font-size: 17px; }#menulist dd { background: #c5ba8e; font-family: Copperplate Gothic Light, Georgia, sans; font-size: 14px; }#menulist li { text-align: center; background: #c5ba8e; }#menulist li a, #menulist dt a { color: #000021; text-decoration: none; display: block; border: 0 none; height: 100%; }#menulist li a:hover, #menulist dt a:hover { background: #eae6d1; }/* slideshow styles end *//* slideshow css */.flashclass { /*sample CSS class added to image slideshow container*/width: 700px; /*a width should be defined for transition to work*/border: 4px double #000021; padding: 0px; }.flashclass img { border-width: 0; }/* slideshow css end *//* link hover */a:link { color: #000021; text-decoration: underline; }a:visited { color: #000021; text-decoration: none; }a:active { color: #000021; text-decoration: none; }a:hover { color: #000021; text-decoration: underline; }/* link hover end */

Thanks in advance. Jessy.

[Ingolme]

Vertical-align is only used to describe the position of an inline-block compared to the text around it. To center something vertically you have to give it an absolute position and use percentage positioning and margin. If the element is inside a parent with fixed height, you can give it a line-height equal to its height to vertically center everything in it.

[jessy2010]

Ok. So help me out. Does that mean that there is a way to center the content of the page - the tan block, not the words and everything - whatever the size of page is? I can add padding til the tan fits inside a laptop screen, but when I look at it on a normal monitor, the page looks kind of funny at the top of the page. Can I use absolute positioning to have it always in the center of the screen no matter the height of the screen? Thanks very much.

[Ingolme]

You can do the following:Give the tan box a width and height, for example: 640x480.Position it absolutely, 50% from the top and 50% from the left.Give it a negative top margin and a negative left margin that is exactly half of the actual height and width of the box:

margin-left: -320px; margin-top: -240px;

Or also:Give the box a height and width in percentage, for example 80% x 80%Position the box half of the remaining percent from the top and left:

top: 10%;left: 10%;

[jessy2010]

I really appreciate all the help. Ok. This is the tan box:

#div2 { position: absolute; height: 600px; width: 1000px; margin-left: -500px; margin-top: -320px; top: 50%; left: 50%; min-height: 600px; min-width: 1000px; }

It centers great vertically and horizontally. I have run into a new problem now. If the browser window is smaller than the tan box, it cuts the top and left off the tan box. I presume this is because the position is absolute and the top and left margins are negative. Is there anyway to work around this so that you can see the entire tan box by scrolling if the window is smaller than it?Thanks very much for the help!

[Ingolme]

Unfortunately. that's the problem with this method.The second method doesn't have the problem but you can't give a specific size in pixels then. I would give a min-width and min-height to the site when using the second method.

[jessy2010]

#div2 { position: absolute; height: 80%; width: 80%; left: 10%; top: 10%; min-height: 600px; min-width: 1000px; }

I set my tan box to percentages, just to see the outcome. On a large monitor (22" - not sure of the resolution - a lot higher than my laptop), it looks centered when the window is maximized, but as soon as I start to resize the window, it leaves the blue space on the left and top even though it is not the min-width or min-height yet. On my laptop screen (1280x800px), it is not centered vertically or horizontally. Did I do something wrong in my css? I played with it for a while, but I didn't seem to get anywhere. I made it centered on my laptop screen, but then it is too far left and up for higher resolution. Any comments would be awesome. Thanks very much for the help!!