web-dev-qa-db-fra.com

Comment centrer le menu horizontal <UL>?

Je dois centrer un menu horizontal.
J'ai essayé diverses solutions, notamment le mélange de inline-block/block/center-align etc., mais je n'y suis pas parvenu.

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 &AGRAVE; JOUR

Je sais comment centrer la ul dans la div. Cela peut être accompli en utilisant la suggestion de Sarfraz… .. Mais les éléments de la liste sont toujours laissés dans la variable ul.

Ai-je besoin de Javascript pour accomplir cela?

cssxhtmlmenuitem
145
Steven

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

Le principe est simple et implique simplement une enveloppe flottante sans largeur qui flotte à gauche puis qui est déplacée de l'écran à 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>

131
reisio

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>

84
Robusto

Avec CSS3 flexbox. Simple.

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

ul li {
  padding: 0 8px;
}
66
Daishi Nakajima

C'est la façon la plus simple que j'ai trouvée. J'ai utilisé votre HTML. Le remplissage est juste pour 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>

20
Shawin

Voici un bon article sur la façon de le faire d'une manière très solide, sans aucun piratage et sans prise en charge intégrale des navigateurs. Travaille pour moi:

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

10
michaeldwp

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.

2
grantex

Comme beaucoup d’entre vous, je suis aux prises avec ce problème depuis quelque temps. La solution a finalement eu à faire avec la div contenant le UL. Toutes les suggestions sur la modification du rembourrage, de la largeur, etc. de l'UL n'ont eu aucun effet, mais les suivantes ont eu.

Il s’agit dumargin:0 auto;du div contenant. J'espère que cela aide certaines personnes, et merci à tous ceux qui l'ont déjà suggéré 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;
}
2
Neal Ganslaw

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;
}
2
Boris Guéry

Essaye ça:

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

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

/*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;
}
1
David

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

Pour aligner les éléments de texte et les éléments de niveau en ligne dans un élément de niveau 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 <!DOCTYPE>. IE6 aligne de façon incorrecte les éléments de niveau de bloc à l'aide de text-align. Donc, si vous cherchez à supporter IE6 (ou si vous n'utilisez pas de <!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 id="topmenu firstlevel" est invalide, car un attribut id ne peut pas contenir d'espaces ...? En effet, la recommandation w3c définit l'attribut id comme un type 'nom' ...

Les jetons ID et NAME doivent commencer par un lettre ([A-Za-z]) et peut être suivie en un nombre quelconque de lettres, de chiffres ([0-9]), traits d'union ("-"), underscore ("_"), les deux points (":") et les points (".").

1
Richard JP Le Guen
ul{margin-left:33%}

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

0
Jon

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);
    });
0
nixis
div {
     text-align: center;
}
div ul {
     display: inline-table;
}

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

0
ruifn

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 les images dans une liste non ordonnée pour faire une galerie ... J'ai fait un violon Js pour batifoler avec elle. N'hésitez pas à essayez-le ici.

[il a été mis en place en utilisant 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;
}
0
xanderoid