Comment centrer horizontalement deux div dans un div en-tête?

Question

J'ai un en-tête div qui est fixé en haut de la fenêtre du navigateur à 100% de largeur. Dans le div de l'en-tête, il y a un div avec le texte du titre et il y a un div avec une liste horizontale. La div horizontale doit apparaître à droite du div.

Voici mon CSS et HTML:

#header { 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    background-color:#333333; 
 
    padding:20px; 
 
} 
 

 
#title { 
 
    float:left; 
 
    color:#000000; 
 
    font-size:30px; 
 
    margin-right:24px; 
 
    background-color:#ffffff; 
 
    padding:8px; 
 
} 
 

 
#navigation ul { 
 
    padding:0; 
 
    margin:0; 
 
    list-style-type:none; 
 
} 
 

 
#navigation ul li { 
 
    display:inline; 
 
    margin-right:20px; 
 
    padding:3px; 
 
    background-color:#ffffff; 
 
} 
 

 
#navigation ul li a { 
 
    color:#000000; 
 
    text-decoration:none; 
 
}

<div id="header"> 
 
    <div id="title">Some Title Text</div> 
 
    <div id="navigation"><ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    </ul></div> 
 
</div>

Donc maintenant les divs de titre et de navigation sont alignés à gauche à l'intérieur du div d'en-tête. Comment puis-je centrer horizontalement les divs de titre et de navigation?

Editer: Préférer une solution qui n'utilise pas une largeur codée en dur (par exemple width: 500px) car la taille de la liste n'est pas toujours la même.

Answer 1

Une méthode qui fonctionne à l'évolution des largeurs de l'en-tête et/ou des deux divs (si le titre devient plus long ou plus court ou si des éléments de navigation sont ajoutés ou supprimés):

Set text-align: center sur le #header, et display: inline-block sur #title et #navigation - démo http://dabblet.com/gist/3151355

changements dans CSS:

#header { 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    background-color:#333333; 
    padding:20px; 
    text-align: center; /* added */ 
} 
#title { 
    color:#000000; 
    font-size:30px; 
    margin-right:24px; 
    display: inline-block; /* took out float:left and added this */ 
    background-color:#ffffff; 
    padding:8px; 
} 
#navigation { 
    display: inline-block; /* added */ 
} 

J'ai aussi ajouté #navigation ul li:last-child {margin-right:0} pour ne pas t o avoir 24px marge après le dernier élément de liste (ce qui donnerait l'impression qu'il y a plus d'espace sur le côté droit de la navigation)

Answer 2

Vous pouvez envelopper les divs de titre et de navigation dans un autre div, puis centrer ce div en utilisant margin: 0 auto.

HTML

<div id="header"> 
    <div id="center"> 
     <div id="title">Some Title Text</div> 
     <div id="navigation"> 
      <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div>​​​​​​​​ 

CSS

#center { 
    width: 500px; /* or any other width */ 
    margin: 0 auto; 
} 

JS Fiddle: http://jsfiddle.net/rJyuJ/

Answer 3

salut pourriez-vous s'il vous plaît essayer avec suivante pour #header css

#header { 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    background-color:#333333; 
    padding:20px; 
    text-align:center; 
}