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


148

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?


Centrer le texte dans chaque LI ou centrer l'UL dans la DIV?
Joop

Réponses:


130

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>


9
Pourriez-vous s'il vous plaît ajouter du code ou du contexte à cette réponse pour éviter la pourriture des liens?
Nightfirecat du

La solution fonctionne très bien et je suis désolé de vous le demander après si longtemps, mais que faire si j'ai une liste déroulante css? Je ne peux pas utiliser le débordement: caché dans le parent alors. Mais ça va encore déborder comme ici: homeafrika.com .
Samia Ruponti

Ne voyez pas de débordement sur ce site. Je ne suis pas sûr que vous ayez besoin du débordement: hidden; bit de toute façon, mais comme il s'agit d'un débordement horizontal, vous pouvez toujours essayer overflow-x: hidden; au lieu. webchat.freenode.net/?nick=oerflowono&channels=#websites pour une assistance en temps réel.
reisio

1
La solution centre bien le menu, mais si vous avez des sous-menus qui devraient s'ouvrir à une certaine position fixe en survol, vous êtes condamné car le position: relativemenu principal change le comportement du position:absolutesous-menu.
cweiske

1
@reisio Où y a-t-il un #buttonsidentifiant dans la question d'OP? Où y a-t-il un avis, dans votre réponse, qu'il doit l'utiliser? Comment cette réponse peut-elle être acceptée et votée en tête, si vous ne répondez pas à la question, en citant uniquement un bla-bla hors sujet à partir d'un lien?
trejder

90

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>


2
d'accord avec @cweiske. Utiliser simplement un text-align: centrer sur le div contenant a résolu le problème pour moi
Kim Stacks

Vous aurez juste besoin de vous assurer que tout texte à l'intérieur reçoit untext-align: left;
Juan Mendes

C'est adorable! Mais, l'ul a un remplissage par défaut sur la gauche, ce qui signifie que le menu est déplacé vers la droite du centre. Vous devrez supprimer le remplissage par défaut de l'ul avec padding-left: 0;
Iterative Gypsy

1
Parfaitement meilleure réponse que la solution acceptée, l'utilisation de l'affichage: en ligne fait l'affaire. n'utilisez pas de flotteur, c'est trop compliqué. Merci pour les informations @Robusto
Clain Dsilva

Le centre text-align dans li n'est pas nécessaire
Aminah Nuraini

75

Avec la flexbox CSS3. Facile.

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

ul li {
  padding: 0 8px;
}

6
Je recommanderais certainement cette méthode
caras

1
Je recommanderais moi aussi cette méthode sur la réponse choisie.
mickburkejnr

Je vous possède une bière!
Suyash Dixit

Je dois dire que je n'ai jamais utilisé flex avant ni justify-content. Excellente réponse
Gman

Great Answer beero
Ilyas karim

20

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>



2

Essaye ça:

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

1
Cela fonctionne pour centrer l'UL. Mais le <LI> est toujours flottant à gauche. Je veux que le <LI> soit centré à l'intérieur du <UL>. C'est possible?
Steven

2

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

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

2

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.


1

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 (".").


1

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

0

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


0

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

0
ul{margin-left:33%}

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


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.