Comment centrer le menu de navigation?

J'utilise les codes suivants pour créer une mise en page, le problème est que le menu de navigation ne se centre pas, les centres de texte, mais pas le reste de la barre de navigation.Comment centrer le menu de navigation?

Voici mon HTML:

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title>Test</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 

<body> 
    <div id="container"> 
    <h1>Test</h1> 


    <ul id="navigation"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Projects</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 


    <div id="content"> 
    </div> 

    <div id="footer"> 
     <p>Test</p> 
    </div> 

    </div> 
</body> 

</html>

Et voici mon CSS:

/***** Body *****/ 
body { 
    font-family: arial, helvetica; 
    text-align:center; 
} 

div#container { 
} 

/***** Navigation Menu *****/ 

ul#navigation { 
    margin: 20px; 
    padding: 0; 
    list-style: none; 
    width: 525px; 
} 

ul#navigation li { 
    display: inline; 
} 

ul#navigation a { 
    text-decoration:none; 
    padding: 5px 0; 
    width: 100px; 
    background: #485e49; 
    color: #eee; 
    float: left; 
    text-align:center; 
} 

ul#navigation a:hover { 
    background: #FF00FF; 
    text-align:left; 
} 

ul#navigation a:active { 
    text-align:right; 
}

Source

2011-08-21 Alper

Changer votre ul#navigation à

ul#navigation { 
    padding: 0; 
    list-style: none; 
    width:400px; 
    margin:0 auto;  
}

Exemple: http://jsfiddle.net/jasongennaro/3WS7B/

Qu'est-il arrivé est votre width était éteint. Une fois que cela a été corrigé à 400px, l'application margin:0 auto travaillé.

Source

2011-08-21 05:19:52

Attendez, pourquoi la largeur était-elle un problème? – Purag

Vous avez appliqué plus de largeur que nécessaire. Le 'nav' était seulement' 400px' mais vous l'aviez à '525px'. Voici la différence et pourquoi il ne faisait pas la queue: http://jsfiddle.net/jasongennaro/3WS7B/1/ –

Oh ... oui, je vois maintenant. Et non, vous n'étiez pas du tout accusateur. Peut-être que je suis sorti comme défensif, heh. Merci d'expliquer. :) – Purag

Vous pouvez ajouter à la ul#navigation css pour le centrer:

margin:0 auto 0 auto;

Alternativement :

margin-left:auto; 
margin-right:auto;

Source

2011-08-21 05:13:05 Purag

Pour une raison quelconque, il ne se centre pas tout le chemin ... – Alper

@Jacob: Bien sûr, c'est: http://jsfiddle.net/purmou/9QAyW/ – Purag

Oh ... pour une raison quelconque, il n'apparaissait pas pour moi dans mon navigateur. Lors du passage à Firefox, il semble fonctionner. – Alper

Comment centrer le menu de navigation?

Répondre

Questions connexes