How to vertically align anything within a div?

HTML & CSS
1

I created a layout for the header and I was trying to position my navigation links in the center of the div’s height, if it is 120px.

I used this following method but it’s not cross browser compatible:

#verticalalign_outer { position:relative; }
#verticalalign_inner { position:absolute; top:50%; height:8em; margin-top:-4.6em; }

<div id=“verticalalign_outer”>
<p>text</p>
<div id=“verticalalign_inner”>

</div>
</div>

Thanks

2

Well verticalalign_inner doesn’t have any content in it. Also the parent needs a height…take this code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css"rel="stylesheet" type="text/css">
<style>
#verticalalign_outer { position:relative; background:blue;padding:0 4px;height:300px;}
#verticalalign_inner { position:absolute; top:50%; height:8em; margin-top:-4.6em; background:red;}
</style>
</head>

<body>
<div id="verticalalign_outer">
<p>text</p>
<div id="verticalalign_inner">
asdf
</div>
</div>


</body>
</html>

Works :).

3

If you have a fixed height and fixed height elements inside then you can just move them around with margins as everything is known.

If you want an automatic vertical alignment of elements with unknown and various heights then it gets a little more complicated especially if full browsers support is required.

Here’s an old example but needs the extra markup for ff2 otherwise it could be simplified a little.

If you wanted just IE8+ support then the display table properties could handle the vertical-alignment quite easily.

4

Thanks for the display table idea, it works. However I’ve tried everything to space the cell containing the navigation from the cell containing the logo.

What should I do to make sure there’s space between the logo and navigation? Thanks

5

It depends on how your markup is. Couldy ou post your current code? Have you tried padding/margin to space the elements out?

6

As Ryan said we would need to see the actula code you are using as I can think of a number of ways (widths, padding, margins) but all depend on teh exact structure concerned.