2011-03-03 9 views
0

Je veux centrer verticalement le sous-menu sur cette page entre les deux lignes.Centrer verticalement un div

http://complete.sanscode.com/Landscape.

Voir la partie qui dit Master Planning | Park ... etc. J'aimerais utiliser jquery pour centrer ça. Est-ce que quelqu'un sait comment?

Editer: Le menu peut comporter plusieurs lignes.

Merci

Jason

+1

pourquoi avez-vous besoin jQ de le faire. Pourquoi pas CSS '{text-align: center;}' – s84

+0

Sorry Guys. Je veux le centre vertical ici, pas le centre horizontal. – Jason

+0

Le menu peut comporter plus d'une ligne, donc la hauteur de la ligne peut causer des problèmes, d'où jquery. – Jason

Répondre

4

Il suffit de régler le CSS line-height à une valeur fixe: http://jsfiddle.net/simevidas/yHJjx/

+0

Si vous définissez la hauteur de ligne égale à la hauteur de l'élément conteneur, le texte sera centré verticalement. Toutefois, si le texte déborde sur deux lignes (par exemple, un texte a été agrandi), votre mise en page sera interrompue. le texte sera perdu. – Moses

+0

@Moses ... seulement si l'élément conteneur a un ensemble de hauteur. Si vous ne définissez que la hauteur de ligne, la hauteur du conteneur sera basée sur la hauteur de ligne, et si le texte déborde dans une deuxième ligne, le conteneur va croître pour envelopper les deux lignes. –

+0

@ Šime Vidas, mais votre disposition se brise encore –

0

Vous pouvez définir l'attribut css 'line-height' au contenu propre à rendre le centre vertical, juste essayer

1

D'après ce que je peux vous dire, vous voulez centrer un élément dans une zone de hauteur fixe? Il vaut mieux simplement ajouter une marge supérieure pour réduire le nav et ajuster l'attribut height en conséquence.

Votre nav sort également de l'écran lorsque vous réduisez la fenêtre du navigateur. Id envisager d'ajouter un conteneur div avec la largeur fixe vous êtes après et la marge auto au centre. Un peu hors sujet mais il devrait vous rendre les éléments plus faciles à gérer.

+0

Un problème se produit lorsque le menu comporte deux lignes. Merci pour votre autre conseil cependant, bon point. +1 – Jason

1

Supprimez le remplissage supérieur de votre ID #navigation et ajoutez un line-height:120px. Vous n'avez pas besoin de jQuery pour cela.

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

Hey Mate, Problème est le menu peut s'étirer sur deux lignes. Existe-t-il un moyen de rendre compte de cela avec la hauteur de la ligne? – Jason

+0

@jason Vous ne devez pas autoriser l'extension de votre menu à 2 lignes. Pas une bonne pratique. Si vous avez besoin de 2 lignes, vous devez adopter une approche différente en définissant votre modèle. Dans le but de cette question va résoudre votre problème. – Hussein

+0

lol, "pas une bonne pratique" ... c'est un peu aléatoire. Avez-vous de la documentation à l'appui? +1 pour l'effort, mais malheureusement je ne peux pas accepter ceci comme réponse parce que j'ai spécifiquement demandé le javascript. – Jason

Questions connexes