web-dev-qa-db-fra.com

Comment centrer le texte dans la barre de navigation du site en CSS?

Je suis un peu perplexe quant à la façon dont je peux centrer le texte sur la barre de navigation car, pour le moment, il ne se place que sur la gauche. J'ai déjà essayé center align mais ça continue à coller au côté. Si quelqu'un pouvait me dire quelle erreur je faisais cela serait grandement apprécié.

HTML:

<body>
<div id="wrap">
</div>
   <ul id="nav">
  <li><a href="#">About Us</a></li>
  <li><a href="#">Our Products</a></li>
  <li><a href="#">FAQs</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Login</a></li>
</ul>
<div id="content">
</div>
</body>

CSS:

body {
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color:#425eb4;
}
*{
    margin: 0 auto 0 auto;
}

#wrap {
    height:150px;
    background:url(images/header1.png) no-repeat center;
    text-align:center;
    background-color:#FFF;
}

#nav {
    width: 100%;
    float: left;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc; }
#nav li {
    float: left;
    text-align:center; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    text-align:center;
    color: #069;
    border-right: 1px solid #ccc; }
#nav li a:hover {
    color: #c00;
    text-align:center;
    background-color: #fff;}
    /* End navigation bar styling. */

#content {
    padding: 0 50px 50px;
    width:1000px;
    height:800px;
    background-color:#FFF;
}
htmlcssnavigation
4
user2602766

Vous devez retirer le float:left de vos éléments #nav et li. Ajoutez ensuite display:inline-block; aux deux. Ajoutez ensuite votre text-align:center au #nav.

 #nav {
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc; 
    margin-left: 0px;  // looks like bootstrap is putting a left margin on your #nav you may want it off.

}
#nav li {
   display: inline-block;
   text-align:center; 
}
6
Trevor

L'OMI ajuste votre CSS pour qu'il ressemble à quelque chose comme ceci (j'omets des valeurs spécifiques à votre code et n'incluent que celles généralement nécessaires pour votre objectif général):

#wrap {
    width:100%;
}

#nav {
    width:300px; //however wide your nav container needs
    margin:auto; //this is what will center an elem, relative to its parent (in 
                 //this case a 100% wide wrap; the 100% is relevant because it 
                 //keeps things centered as window is resized.
}
0
HC_

Tous les bons commentaires, je pense que cela aidera quelqu'un aussi ", 
J'utilise quelque chose comme ceci habituellement, Il est équilibré/centré/et bloque pour que tout soit cliquable

<head>
<style>

ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}

a {
display: inline-block;
width: 80px;
background-color: #dddddd;
text-align: center; 
}

li {
width: 100px;
margin: auto;
display: inline;
}

p { 
clear: both; 
margin: 10px 5px;
text-align: center; 
background-color: yellow;
}

</style>
</head>
<body>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>

<p>Notice we are all centered</p> 
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>

</body>
0
TheRocker

Utilisez ce CSS:

Retirez les éléments flottants, utilisez display:inline-block pour placer les lis les uns à côté des autres, puis utilisez text-align: center sur le #nav. Est-ce ce que vous cherchez?

body {
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #425eb4;
}

* {
    margin: 0 auto;
}

#wrap {
    height: 150px;
    background: url(images/header1.png) no-repeat center;
    text-align: center;
    background-color: #FFF;
}

#nav {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

#nav li {
    display: inline-block;
    text-align: center;
}

#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    color: #069;
    border-right: 1px solid #ccc;
}

#nav li a:hover {
    color: #c00;
    text-align: center;
    background-color: #fff;
}

/* End navigation bar styling. */
#content {
    padding: 0 50px 50px;
    width: 1000px;
    height: 800px;
    background-color: #FFF;
}
0
Scott