centrer un menu transparent

Question

J'essaie de faire apparaître mon menu transparent centré, mais peu importe la méthode que je déterre sur Internet, rien ne semble faire l'affaire.

J'aimerais vraiment que quelqu'un puisse lire ce code et me donner un coup de main. :)

Le HTML-partie:

<div id="container"> 
<div id="menu"> 
    <span class="bg"></span> 
    <ul> 
     <li><a href="print">PRINT</a></li> 
     <li><a href="tv">TV</a></li> 
     <li><a href="other">OTHER</a></li> 
     <li><a href="resume">RESUME</a></li> 
    </ul> 
</div> 

La partie CSS:

#container 
{ 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
    padding: 10px 0 0 0 
    overflow:hidden; 
    font-family:arial; 
    height:400px; 
} 

#menu 
{ 

    float: left; // **WHENEVER I CHANGE THIS FLOAT, THE MENU-BACKGROUND DISAPPEARS?!** 
    position: relative; 
    display:inline; 
    border:2px solid #000; 
    border-top:0; 
    border-radius:0 0 10px 10px; 
} 
#menu .bg 
{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    background:#000; 
    opacity:0.5; 
    filter:alpha(opacity=50); 
    left:0; 
    top:0; 
} 
#menu li 
{ 
    float:left; 
} 
#menu a 
{ 
    text-decoration:none; 
    position:relative; 
    padding:8px 13px; 
    color:white; 
    font-weight:bold; 
    z-index:2; 
    float:left; 
} 
#menu a:hover 
{ 
    color:#999; 
} 

Answer 1

Vous pouvez le faire en mettant à jour #menu à:

#menu { 
    position: absolute; 
    border:2px solid #000; 
    border-top:0; 
    border-radius:0 0 10px 10px; 
    left: 50%; 
    margin-left: -152px; 
    width: 305px; 
} 

JSFiddle

Answer 2

flotte est difficile Centrage. Voici une méthode:

<style type="text/css"> 

#container 
{ 

font-family:arial; 
height:400px; 
border: red; 
position: relative; 

} 

#menu 
{ 

position:relative; 
left:-50%; 
float:right; 
} 

ul 
{ 
position:relative; 
left:50%; 
background: rgba(0, 0, 0, 0.5); 
overflow: hidden; 
} 

li{ 
display:block; 
float:left; 
padding: 8px 13px; 
} 

a {text-decoration:none;} 

</style> 
<div id="container"> 
<div id="menu"> 
<ul> 
    <li><a href="print">PRINT</a></li> 
    <li><a href="tv">TV</a></li> 
    <li><a href="other">OTHER</a></li> 
    <li><a href="resume">RESUME</a></li> 
</ul> 
</div> 
</div> 

Source: http://browse-tutorials.com/snippet/center-floats-css Fiddle: http://jsfiddle.net/yucHM/2/

Answer 3

La raison pour laquelle votre menu n'est pas centrage, c'est parce que vous n'avez pas de largeur définie pour le menu ou le conteneur. Si vous aviez une largeur définie, alors vous pourrez utiliser:

margin: 0 auto; 

Je ne sais pas encore pourquoi votre flotteur commence déconner vos couleurs de fond, mais je ne remarque que vous avez manqué un point-virgule à la fin de un de vos propriétés de style

#container 
{ 
padding: 10px 0 0 0 
... 
} 

devrait être

#container 
{ 
padding: 10px 0 0 0; 
... 
} 

Answer 4

une autre option:

ÉDITÉ CSS:

#container 
    { 
     display: inline-block; 
     *display: inline; 
     zoom: 1; 
     padding: 10px 0 0 0 
     overflow:hidden; 
     font-family:arial; 
     height:400px; 


    } 

    #menu 
    { 

     float: left; // **WHENEVER I CHANGE THIS FLOAT, THE MENU-BACKGROUND DISAPPEARS?!** 
     position: relative; 
     display:inline; 

    } 
    #menu .bg 
    { 
     position:absolute; 
     width:100%; 
     height:100%; 
     background:#000; 
     opacity:0.5; 
     filter:alpha(opacity=50); 
     left:0; 
     top:0; 
    } 
    #menu ul {   <===Added this definition and moved the border here as well 
     clear:left; 
     float:left; 
     list-style:none; 
     margin:0; 
     padding:0; 
     position:relative; 
     left:50%; 
     text-align:center; 
     border:2px solid #000; 
     border-top:0; 
     border-radius:0 0 10px 10px; 
    } 
    #menu li 
    { 
     float:left; 
    } 
    #menu a 
    { 
     text-decoration:none; 
     position:relative; 
     padding:8px 13px; 
     color:white; 
     font-weight:bold; 
     z-index:2; 
     float:left; 
    } 
    #menu a:hover 
    { 
     color:#999; 
    }​ 

ÉDITÉ HTML (fermé une balise div)

<div id="container"> 
<div id="menu"> 
    <span class="bg"></span> 
    <ul> 
     <li><a href="print">PRINT</a></li> 
     <li><a href="tv">TV</a></li> 
     <li><a href="other">OTHER</a></li> 
     <li><a href="resume">RESUME</a></li> 
    </ul> 
    </div> 
</div>​ 

Et voici le FIDDLE