Page 1 of 2
[CSS] Vertical Alignment Without Table
Posted: Sun May 17, 2009 3:46 pm
by McInfo
I would like to align a text-filled div exactly in the center of the page (centered horizontally and vertically) without knowing the height of the div. This can be done using a table and relying on the valign="middle" attribute of a td, but I would like to do it without the table.
Code: Select all
<html>
<head>
<title>Vertical Alignment With Table</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background-color: #FFF;
}
table.overlay {
width: 100%;
height: 100%;
background-color: #D0E0F0;
text-align: center;
}
.hello {
margin: auto;
padding: 1em;
width: 200px;
background-color: #B0C0D0;
text-align: justify;
}
.hello h2 {
margin: 0 0 1em 0;
padding: 0;
}
-->
</style>
</head>
<body>
<table class="overlay">
<tr>
<td valign="middle">
<div class="hello">
<h2>Hello, World.</h2>
<div>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
This code works only without a doctype. Is it possible to do this layout without the table and with the XHTML 1.0 Strict DTD?
Edit: This post was recovered from search engine cache.
Re: [CSS] Vertical Alignment Without Table
Posted: Sun May 17, 2009 4:44 pm
by McInfo
I found an example that uses divs at
http://www.w3.org/Style/Examples/007/center. Using the example as a guide, I came up with this:
Code: Select all
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertical Alignment With Divs</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background-color: #FFF;
}
.overlay {
position: fixed;
display: table;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #D0E0F0;
}
.td {
display: table-cell;
vertical-align: middle;
}
.hello {
margin: auto;
padding: 1em;
width: 200px;
background-color: #B0C0D0;
text-align: justify;
}
.hello h2 {
margin: 0 0 1em 0;
padding: 0;
}
-->
</style>
</head>
<body>
<div class="overlay">
<div class="td">
<div class="hello">
<h2>Hello, World.</h2>
<div>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</div>
</div>
</div>
</div>
</body>
</html>
In Firefox 3, the page appears the same as the page I posed before. Unfortunately, in Internet Explorer 7, the div.hello is centered horizontally but not vertically. It also uses a lot of nested divs that simply take the place of the table.
I'm still looking for a solution.
Edit: This post was recovered from search engine cache.
Re: [CSS] Vertical Alignment Without Table
Posted: Mon Jun 08, 2009 10:28 am
by lmg
Did you ever find a solution to your problem? I think I am trying to do the same thing as you.
Re: [CSS] Vertical Alignment Without Table
Posted: Mon Jun 08, 2009 10:55 pm
by McInfo
I have not found a solution (probably because I stopped looking). I'm hoping this will be solved in some future version of CSS.
Edit: This post was recovered from search engine cache.
Re: [CSS] Vertical Alignment Without Table
Posted: Tue Jun 09, 2009 2:02 am
by becky-atlanta
Why don't you want tables?
Re: [CSS] Vertical Alignment Without Table
Posted: Tue Jun 09, 2009 2:22 pm
by McInfo
I was hoping there was a way to achieve the centering with fewer tags.
Ideally, I would like to use just one centering container:
Code: Select all
<div class="centered_vertically_and_horizontally">
<h2>Hello, World.</h2>
<div>Lorem ipsum...</div>
</div>
But I would settle for two:
Code: Select all
<div class="entire_page_width_and_height">
<div class="centered_vertically_and_horizontally">
<h2>Hello, World.</h2>
<div>Lorem ipsum...</div>
</div>
</div>
This would be easy to do with absolute positioning and a fixed-height container, but I don't want scroll bars or blank space on the container. The height of the centered container has to be dynamic to fit the content inside it.
Edit: This post was recovered from search engine cache.
Re: [CSS] Vertical Alignment Without Table
Posted: Tue Jun 09, 2009 6:20 pm
by omniuni
Oh, I HATE this! I have had this problem myself. So far, I usually have settled by creating a div positioned about 30% from the top of the browser. I find that for most of the situations, this produces a pleasing result.
For IE, you can always include an alternate style sheet, or use IE conditionals to add a table to fix the problem for IE users.
Becky-Atlanta, there are many many reasons not to use tables. Google it if you must, but please, don't use tables for layout!
P.S. It's not standard, but you could try doing something like absolute positioning in a div with a clearing div, and a -50% padding or margin-bottom or something like that. It's sort of an "eew" solution, though.
Re: [CSS] Vertical Alignment Without Table
Posted: Wed Jun 10, 2009 6:44 am
by becky-atlanta
I did read a lot about not using table for layout. However, when I tried that in my latest web design, the result was less satisfactory. when it looks good in FF, it is not right in IE, then you have to consider Chrome and others.
I finally have not change back to tables, i.e. minimum table with CSS of course, to maintain certain aspect in a much easier, management and predictable way.
Don't get me wrong. I am all for CSS. At the same time, the "standard" is not working across the browsers. The reality is whatever works, I'll use it. I don't like to complicate things, so I take the easiest and the most logical way. Be flexible and creative is the key. For example, a beautiful waste basket does have to be for trash, it can be turned into a vase. You get the point?
Re: [CSS] Vertical Alignment Without Table
Posted: Wed Jun 10, 2009 6:48 am
by becky-atlanta
McInfo wrote:I was hoping there was a way to achieve the centering with fewer tags.
To center horizonally, you can also use this:
Code: Select all
<body>
<center>
your content
</center>
</body>
To center vertically is a bit tough.
Re: [CSS] Vertical Alignment Without Table
Posted: Wed Jun 10, 2009 7:10 am
by omniuni
Becky,
<center> is depreciated, and has been for some time. style="text-align: center;" does the same thing in a non-depreciated manner.
CSS is unfortunately, the only thing that "works" by modern standards.
Every time I have ever used a table for layout, dynamic content always causes problems later. It's like designing a house by making a room, kicking a hole in the wall for a door, and building another room. Everything looks OK at first, but eventually, you realize you forgot a closet, kick a hole in the wall to create it, and find that you've in fact put your foot through the back of your fireplace which happens to be in the middle of your bath tub. Sure, it's a pain to learn CSS at first, and three column layouts with equal-height columns are all but impossible, but once you understand the language, it becomes much easier than tables to create GOOD flexible layouts that can handle any content you throw at them in a more flexible manner, than tables ever could. It does take patience, but it pays off in lack of headaches later on, and also in search engine optimization!
Other than that, if you really insist on using tables for layout, so be it, but until you learn to embrace CSS and all its shortcomings, your design work will always lack behind those that truly understand the tools of the trade. BTW, that's NOT me. I still can't achieve some of the amazing CSS layouts I see on various websites, but I try, and usually, my efforts pay off.
Re: [CSS] Vertical Alignment Without Table
Posted: Wed Jun 10, 2009 10:37 am
by McInfo
In defense of tables

, the following HTML
- centers the content vertically and horizontally as intended;
- validates as XHTML 1.0 Strict through W3C's Markup Validation Service;
- renders fine with CSS turned off (though not centered);
- renders the same in Firefox 3 and Internet Explorer 7 on Windows Vista;
- uses a table.
Code: Select all
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Alignment</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.stretch {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
table.valign {
margin: 0 auto;
width: 300px;
height: 100%;
/*background-color: #8098AF;*/
}
.content {
background-color: #40586F;
padding: 20px;
padding-bottom: 0;
text-align: justify;
color: #F8F8E8;
}
</style>
</head>
<body>
<h1>Background Content</h1>
<div class="stretch">
<table class="valign"><tbody><tr><td valign="middle">
<h1 class="content">Hello, World</h1>
<p class="content">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
<p class="content">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
<div class="content"><!-- padding bottom --></div>
</td></tr></tbody></table>
</div>
</body>
</html>
The only problem is that extra HTML tags are required to achieve the layout, which is what CSS is supposed to avoid.
Edit: This post was recovered from search engine cache.
Re: [CSS] Vertical Alignment Without Table
Posted: Wed Jun 10, 2009 11:45 am
by omniuni
I can't really argue with you McInfo. It works, so long as you're not worried about accessibility, or SEO, or layout flexibility. I still maintain that it's a bad idea.
Try this?
CSS:
Code: Select all
.centerme{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 50%;
height: 50%;
margin: auto;
}
.makecenter{
display: block;
text-align: center;
border: 1px solid red;
}
<!--[if lte IE 7]>
.centerme{
position: absolute;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
}
<![endif]-->
HTML:
Code: Select all
<div class="centerme"><div class="makecenter">
1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
6<br/>
7
</div></div>
Re: [CSS] Vertical Alignment Without Table
Posted: Wed Jun 10, 2009 12:03 pm
by McInfo
While the div.centerme is centered vertically and horizontally, it does not shrink or expand to fit the content; and while the div.makecenter shrinks or expands to fit the content, it is not centered vertically.
Edit: This post was recovered from search engine cache.
Re: [CSS] Vertical Alignment Without Table
Posted: Wed Jun 10, 2009 3:11 pm
by omniuni
Oh!
My mistake!
Change the IE conditional to the makecenter, not centerme class!

Re: [CSS] Vertical Alignment Without Table
Posted: Mon Jul 06, 2009 1:40 pm
by becky-atlanta