Comment puis-je centrer l'alignement horizontal <UL> menu?

Question

J'ai besoin de centre d'aligner un menu horizontal.
J'ai essayé diverses solutions, y compris le mélange de inline-block / block / centrer etc., mais pour ne pas être couronnée de succès.

Quelqu'un peut-il m'aider s'il vous plaît? :)

Voici mon code:

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

Mise à JOUR

Je sais comment faire pour centrer aligner à l'amt à l'intérieur de la DIV. Qui peut être accompli en utilisant Sarfraz de la suggestion. Mais les éléments de la liste sont toujours flotté gauche au sein de l'UL.

Puis-je sentir javascript pour accomplir cette?

Answer 1

http://pmob.co.uk/pob/centred-float.htm

Le principe est simple et fondamentalement juste implique un sans châsse float wrapper qui est lancée vers la gauche et ensuite déplacé hors de l'écran, à gauche de la largeur de position:relative; left:-50%. Suivant la imbriquée à l'intérieur de l'élément est inversé, et une position relative de +50% est appliqué. Cela a pour effet de placer l'élément de morts dans le centre. Le positionnement relatif maintient le flux et permet à d'autres contenus de couler en dessous.

Code:

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/

Answer 2

Cela fonctionne pour moi. Si je n'ai pas mal interprété votre question, vous pourriez l'essayer.

 <div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">Amazon 1</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>
 

avec le CSS comme:

     div#centerDiv {
        width: 600px;
        text-align: center;
        border: 1px solid red;
    }
    ul.centerUL {
        margin: 2px auto;
        line-height: 1.4;
    }
    .centerUL li {
        display: inline;
        text-align: center;
    }
 

Answer 3

Voici un bon article sur la façon de le faire d'une manière assez solide, sans aucun piratage ni prise en charge complète du navigateur. Travaille pour moi:

-> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Answer 4

Comme beaucoup d’entre vous, je me débat avec ça depuis un moment. La solution a finalement eu à faire avec la div contenant l'UL. Toutes les suggestions sur la modification du rembourrage, de la largeur, etc.

Tout est question de margin:0 auto; sur la div contenant. J'espère que cela aide certaines personnes et merci à tous ceux qui ont déjà suggéré cela en combinaison avec d'autres choses.

 .divNav
{
    width: 99%;
    text-align:center;
    margin:0 auto; 
}

.divNav ul
{ 
    display:inline-block; 
    list-style:none;
    zoom: 1;
}

.divNav ul li 
{
    float:left;
    margin-right: .8em;       
    padding: 0; 
}

.divNav a,  #divNav a:visited
{
    width: 7.5em;
    display: block; 
    border: 1px solid #000;
    border-bottom:none;
    padding: 5px; 
    background-color:#F90;
    text-decoration: none;
    color:#FFF;
    text-align: center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:1em;
}
 

Answer 5

Essaye ça:

 div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}