CSS: impossible de centrer un UL

Sur this page, j'ai un menu de pied de page # menu-footer-menu; "A propos de - Sélectionnez votre ville - Comment fonctionne Walks ..." généré par Wordpress.CSS: impossible de centrer un UL

<div class="menu-footer-menu-container"> 
    <ul id="menu-footer-menu" class="menu"> 
    <li id="menu-item-143"><a href="#">About</a></li> 
    <li id="menu-item-151"><a href="#">Select Your City</a></li> 
    <li id="menu-item-162"><a href="#">How Walks Work</a></li> 
    <li id="menu-item-160"><a href="#">FAQs</a></li> 
    <li id="menu-item-166"><a href="#">Blog</a></li> 
    <li id="menu-item-153"><a href="#">Partners</a></li> 
    <li id="menu-item-154"><a href="#">Press</a></li> 
    <li id="menu-item-144"><a href="#">Privacy Policy</a></li> 
    <li id="menu-item-145"><a href="#">Site Map</a></li> 
    <li id="menu-item-146"><a href="#">Terms &#038; Conditions</a></li> 
    </ul> 
</div>

Je souhaite centrer ce menu.

J'ai essayé le CSS suivant, mais cela n'a pas fonctionné.

div.menu-footer-menu-container {text-align:center;} 
ul#menu-footer-menu.menu { 
    list-style-type: none; 
    width: 760px !important; 
    margin: 0 auto !important; 
    display: inline-block !important; 
} 
ul#menu-footer-menu li { 
    display: inline-block !important; 
    margin-right: 14px; 
    margin-right: 1rem; 
}

Source

2014-05-09 Steve

-1

Ajouter un style de plus text-align: center to # footer-menu dans css.

Source

2014-05-09 07:22:59 ahalya

@ Steve Avez-vous regardé d'autres réponses ... ? –

Oui, j'ai fait Paul. – Steve

@Steve et donc comment êtes-vous arrivé à la conclusion que cette addition (extra css = lente analyse) est meilleure que la modification de l'expression css? –

Vous devez ajouter un élément d'emballage avec une largeur de 100% pour centrer votre div dans

Comme:

<div class="wrapper"> 
<div class="menu-footer-menu-container"> 
    ... 
</div> 


.wrapper{ width:100% }

Source

2014-05-09 07:20:16 AHaberl

Pas vrai dans ce cas –

utilisation display:block au lieu de inline-block

ul#menu-footer-menu.menu { 
    list-style-type: none; 
    width: 760px !important; 
    margin: 0 auto !important; 
    display: block !important; 
}

Source

2014-05-09 07:21:19

testé en chrome et centres correctement - j'imagine que cela est vrai de tous les navigateurs décents, mais x-tests –

Utilisez css suivant à la place de ce que vous avez. Je viens de changer l'affichage pour ul # menu-footer-menu.menu pour ne rien bloquer d'autre.

div.menu-footer-menu-container {text-align:center;} 
ul#menu-footer-menu.menu { 
    list-style-type: none; 
    width: 760px !important; 
    margin: 0 auto !important; 
    display: block !important; 
} 
ul#menu-footer-menu li { 
    display: inline-block !important; 
    margin-right: 14px; 
    margin-right: 1rem; 
}

Source

2014-05-09 07:24:12

Euh ... Je vous ai battu à cette réponse: P –

Essayez d'ajouter CSS Style:

.menu-footer-menu-container 
{ 
    text-align: center; 
}

enter image description here

Source

2014-05-09 07:28:49

Vous avez deux façons de le faire

centre de dégradation largeur tag

<center> 
    <ul> 
     ... 
    </ul> 
    </center>

Créer une autre div pour forcer le centre

.center {margin: auto; text-align: centre; }
```
<div class="center"> 
    <ul> 
     ... 
    </ul> 
    </div> 
```

Note: L'étiquette doit être inline-block.

Largeur de texte: centre;

ul{ text-align: center; } 

    <center> 
    <ul> 
     ... 
    </ul> 
    </center>

Source

2014-05-09 07:29:20

CSS: impossible de centrer un UL

Répondre

Questions connexes