Vertically Centre A Div

I want to vertically centre the submenu on this page in between the two lines. http://complete.sanscode.com/Landscape. See the part that says Master Planning | Park... etc. I'd lik

Solution 1:

Just set the CSS line-height to a fixed value: http://jsfiddle.net/simevidas/yHJjx/

Solution 2:

From what I can tell you are wanting to center an element in a fixed height area? You are best off just adding a top margin to puch the nav down and adjust the height attribute accordingly..

Also, your nav leaves the screen when you shrink the browser window too. Id consider adding a container div with the fixed width you are after and margin auto to center. Slightly off topic but it should make you elements easier to manage.

Solution 3:

Remove top padding from your #navigation id and add a line-height:120px. You don't need jQuery for this.

#navigation {
height:120px;
line-height:120px;
padding:0 1em 0 0;
width:720px;
}

Solution 4:

I gave up and used tables.

http://giveupandusetables.com/

but the line height thing did the trick, see above answers

Solution 5:

You can set the css attribute 'line-height' to proper content to make it vertical center, just have a try