Comment puis-je centrer le menu horizontal <UL>?

J'ai besoin d'aligner au centre un menu horizontal.
J'ai essayé diverses solutions, y compris le mélange de inline-block/ block/ center-alignetc., mais je n'ai pas réussi.

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>

METTRE À JOUR

Je sais comment centrer l'alignement uldans le div. Cela peut être accompli en utilisant la suggestion de Sarfraz. Mais les éléments de la liste sont toujours flottants à gauche dans le ul.

Ai-je besoin de Javascript pour accomplir cela?

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

La prémisse est simple et implique simplement une enveloppe flottante sans largeur qui flotte vers la gauche, puis déplacée hors de l'écran vers la position de largeur gauche: relative; gauche: -50%. Ensuite, l'élément interne imbriqué est inversé et une position relative de + 50% est appliquée. Cela a pour effet de placer l'élément mort au centre. Le positionnement relatif maintient le flux et permet à d'autres contenus de circuler 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*/

<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>

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

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

<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 la flexbox CSS3. Facile.

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}

C'est le moyen le plus simple que j'ai trouvé. J'ai utilisé votre html. Le remplissage sert uniquement à réinitialiser les paramètres par défaut du navigateur.

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline-block;
}

<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>

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

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

Essaye ça:

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

Fais-le comme ça :

   <div id="footer">
        <ul>
            <li><a href="/1.html">Link 1</a></li>
            <li><a href="/2.html">Link 2</a></li>
            <li><a href="/3.html">Link 3</a></li>
            <li><a href="/4.html">Link 4</a></li>
            <li><a href="/5.html">Link 5</a></li>
        </ul>
   </div>

Et le CSS:

#footer {
    background-color:#ccc;
    height:39px;
    line-height:36px;
    margin:0 auto;
    text-align:center;
    width:950px;
}

#footer ul li {
    display:inline;
    font-family:Arial,sans-serif;
    font-size:1em;
    padding:0 2px;
    text-decoration:none;
}

Comme beaucoup d'entre vous, je me débat avec ça depuis un moment. La solution a finalement eu à voir avec le div contenant l'UL. Toutes les suggestions sur la modification du rembourrage, de la largeur, etc. de l'UL n'avaient aucun effet, mais les suivantes l'ont fait.

Tout tourne autour margin:0 auto;de la div contenant. J'espère que cela aidera 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;
}

Démo - http://codepen.io/grantex/pen/InLmJ

<div class="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Others</a></li>
    </ul>
</div>


.navigation {
    max-width: 700px;
    margin: 0 auto;
}
.navigation ul {
    list-style: none;
    display: table;
    width: 100%;
}
.navigation ul li {
    display: table-cell;
    text-align: center;
}
.navigation ul li a {
    padding: 5px 10px;
    width: 100%;
}

Omg tellement plus propre.

De manière générale, la manière de centrer un élément de niveau noir (comme a <ul>) utilise la margin:auto;propriété.

Pour aligner le texte et les éléments de niveau en ligne dans un élément de niveau de bloc, utilisez text-align:center;. Donc tous ensemble quelque chose comme ...

ul {
    margin:auto;
}
ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

... devrait marcher.

Le cas marginal est Internet Explorer6 ... ou même d'autres IE lorsque vous n'utilisez pas un <!DOCTYPE>. IE6 aligne incorrectement les éléments de niveau de bloc en utilisant text-align. Donc, si vous souhaitez prendre en charge IE6 (ou n'utilisez pas a <!DOCTYPE>), votre solution complète est ...

div.topmenu-design {
    text-align:center;
}
div.topmenu-design ul {
    margin:auto;
}
div.topmenu-design ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

En note de bas de page, je pense que ce id="topmenu firstlevel"n'est pas valide car un idattribut ne peut pas contenir d'espaces ...? En effet, la recommandation du w3c définit l' idattribut comme un type de 'nom' ...

Les jetons ID et NOM doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis de n'importe quel nombre de lettres, chiffres ([0-9]), tirets ("-"), traits de soulignement ("_") , deux points (":") et des points (".").

J'ai utilisé la propriété display: inline-block: la solution consiste à utiliser un wrapper de largeur fixe. À l'intérieur, le bloc ul avec le bloc en ligne pour l'affichage. En utilisant cela, l'ul prend juste la largeur du contenu réel! et enfin margin: 0 auto, pour centrer ce bloc en ligne =)

/*ul wrapper*/
.gallery_wrapper{
        width:          958px;
        margin:         0 auto;
  }
/*ul list*/
ul.gallery_carrousel{
        display:        inline-block;
        margin:         0 auto;
}
.contenido_secundario li{
        float:          left;
}

j'utilise le code jquery pour cela. (Solution alternative)

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });

div {
     text-align: center;
}
div ul {
     display: inline-table;
}

ul as inline-table corrige le problème avec. J'ai utilisé le div parent pour aligner le texte au centre. de cette façon, il a l'air bien même dans d'autres langues (traduction, largeur différente)

La solution de @ Robusto était la plus simple pour ce que j'essayais de faire, je vous suggère de l'utiliser. J'essayais de faire la même chose pour des images dans une liste non ordonnée pour faire une galerie ... J'ai fait un violon js pour s'amuser avec. N'hésitez pas à l' essayer ici.

[il a été configuré à l'aide de l'exemple de code de robusto]
HTML:

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
    </ul>
</div>

CSS:

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

ul{margin-left:33%}

Est une bonne approximation sur les grands écrans. Ce n'est pas bon, mais une bonne solution sale.

.topmenu-design
{
    display: inline-table;
}

C'est tout!