Using valign in css

ice78991 · Feb 9, 2007

There are times when you want to vertically center on a page. Is it possible to accomplish this by including a table cell within your overall css layout. I have been experimenting with this but the results are unpredicatable ( the Vertically centered dynamic content table cell is either too narrow or the containing div is too wide depending on browser).
Is this possible to achieve? i have included a simple page layout meant to display as follows

Title
Link1 Link2

More Links
More Links Vertically centered dynamic content
More Links

Footer

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">

</style>
</head>

<body style="margin:0;padding:0;">
<div class="wrapper">
<div class="title"><p class="centInline">Title</p></div>
<div class="links">link1 | link2</div>
<div class="leftbox">MoreLinks1<br>MoreLinks2<br>MoreLinks3<br></div>
<div class="rightbox">
<table style = "width: 100%;height: 100%">
<tr><td class="righttablecell">Vertically centered dynamic content</td></tr></table>
</div>
<div class="footer"><p class="centInline">Footer</p></div>
</div>
</body>
</html>

1DMF · Feb 9, 2007

if you are going to use a table, then you apply valign="middle" to the TD tag.

otherwise scrap the table, use a 'fixed width' div and apply 'margin:0 auto;' to it.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

1DMF · Feb 9, 2007

whoops that post horizontal aligns :-( my bad

Code:

margin: auto;

it should be.

though there is the attribute in css vertical-align:middle; which should vertically align text with in the div.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

mkrausnick · Feb 9, 2007

You'd think it would be as simple as horizontal alignment, but it's not.

There's a ton of information available on different techniques to achieve vertical alignment. Bottom line is that the css vertical-align property is unreliably implemented in different browsers.

Google 'vertical align html' and read some of the info that describes different ways of accomplishing it, then pick one.

Here's one of my favorites, which purpose is to put a table in the center of a non-scrolling screen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
/* commented backslash hack for ie5mac \*/ 
html, body{height:100%;} 
/* end hack */
#main{
 position: absolute;
 left: 50%;
 top: 50%;
 margin-top: -50px; /* make this half your element height */
 margin-left: -50px; /* make this half your element width */
border: 1px solid #FF0000;
width:100px;
height:100px;
}
</style>

</head>
<body >
<div id="main" >
<Table id = "go" width = "100%"  height = "100%"  border = "3">
<tr><td align = "center" valign = "middle"> test</td></tr>
</table>
</div>
</body>
</html>

I didn't create this, I got it from

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html.

The down side is that it uses absolute positioning.

Good luck.

Mike Krausnick
Dublin, California

kaht · Feb 9, 2007

The down side is that it uses absolute positioning.

Not to mention tables for layout....

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

Vragabond · Feb 9, 2007

http://d-graff.de/fricca/center.html

The only good way of centering your page vertically and horizontally that I've seen. The example above does not have a doctype, but I have tested it to work with a full doctype as well. It avoids tables, being styled as tables and absolute positioning.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Using valign in css

ice78991

Programmer

1DMF

Programmer

1DMF

Programmer

mkrausnick

Programmer

kaht

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor