CODEWITHSUNDEEP
jqueryhtmlcssvertical-alignment
Jason
Jason

Reputation: 15358

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

Upvotes: 0

Views: 399

Answers (5)

Jason
Jason

Reputation: 15358

I gave up and used tables.

http://giveupandusetables.com/

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

Upvotes: 1

Hussein
Hussein

Reputation: 42818

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

Upvotes: 1

sweetroll
sweetroll

Reputation: 176

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.

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 185933

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

Upvotes: 4

Michael Bai
Michael Bai

Reputation: 586

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

Upvotes: 0

Related Questions