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 like to use jquery to centre that. Does anyone know how?

Edit: The menu can be more than one line.

Thanks

Jason

回答1:

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

回答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.

回答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;
}

回答4:

I gave up and used tables.

http://giveupandusetables.com/

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

回答5:

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

来源：https://stackoverflow.com/questions/5175819/vertically-centre-a-div