web-dev-qa-db-fra.com

Pouvez-vous m'aider à centrer un élément <ul> avec CSS?

J'ai été intrigué par quelque chose qui devrait être très facile, mais après trois heures infructueuses, je ne l'ai pas encore résolu:

Un ami m'a demandé de corriger le modèle de his WordPress pour que la barre de menus de navigation horizontale soit centrée horizontalement sur la page. Il souhaite qu'il s'adapte parfaitement à travers en bas au milieu de la section rouge - il s'insérerait simplement entre les deux emblèmes de chaque côté de la page rouge.

La section rouge (class="header") a text-align défini sur center. Cela semble être assez bon pour s'assurer que le titre et le texte de description en dessous sont alignés au centre mais pour une raison quelconque, je ne peux pas aligner le menu (qui est un ul) au centre de la page.

Quelqu'un voudrait-il suggérer ce que je fais mal? Pourquoi est-ce que je n'arrive pas à centrer le menu? De quoi ai-je besoin pour changer la feuille de style pour qu'elle fonctionne?

cssnavigationhtml-listscenter
49
Salim Fadhley

Pour centrer une rangée de blocs, vous devez utiliser le bloc en ligne:

ul.menu { display: block; text-align:center; }
ul.menu li { display: inline-block; }

IE ne comprend pas le bloc en ligne, mais si vous le définissez en ligne uniquement pour IE, il se comportera toujours comme un bloc en ligne:

<!--[if lt IE 8]>
ul.menu li { display: inline }
<![endif]-->
74
Andrew Vit

1 Écrivez style="text-align: center;" au parent div de ul

2 Écrivez style="display: inline-table;" à ul

2 Écrivez style=" display: inline;" à li

<div class="menu">
  <ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
  </ul>
</div>

<style>
.menu { text-align:center; }
.menu ul { display:inline-table;}
.menu ul li {display:inline;}
</style>

Terminer

34
Dashrath

largeur spécifiée pour ul ul{ width:700px; margin:0 auto;}

0
Mario Gonzales Flores

La meilleure façon de le faire est la suivante:

Enveloppez le ul dans un nouveau div id = "topmenu" ou quelque chose comme ça, puis donnez-lui les styles suivants

bottom:0;
position:absolute;
width:780px;

et donnez le ul.menu ce

margin:0 auto;
width:535px;

Le seul problème ici est que vous définissez la largeur de la liste des menus, donc si la largeur des éléments de menu change, elle devra également être modifiée dans le fichier CSS (c'est-à-dire si un nouvel élément de menu est ajouté.

PDATE: Je viens de remarquer votre commentaire ci-dessus sur le fait de ne pas définir la largeur manuellement. Si vous êtes prêt à utiliser un tout petit peu de javascript, vous pouvez le coller dans le bloc prêt pour le document et supprimer le width: 535px;

var sum = 0; jQuery('.menu').children().each(function() { sum += jQuery(this).outerWidth(); }); jQuery('.menu').css('width', sum + 30);

Cela définira la propriété css width sur la largeur réelle rendue une fois la page chargée, de sorte que la mise en page fonctionnera.

HTML complet ci-dessous:

<div id="header">
    <h1 class="blog-title"><a href="http://www.hootingyard.org/" accesskey="1">Hooting Yard</a></h1>
    <p class="description">A Website by Frank Key</p>
    <div id="topmenu">
        <ul class="menu">
        <li class="current_page_item"><a href="http://www.hootingyard.org/" title="Prose, etc">Prose, etc</a></li>      
        <li class="page_item page-item-533"><a href="http://www.hootingyard.org/archivepage" title="Archives">Archives</a></li>
<li class="page_item page-item-534"><a href="http://www.hootingyard.org/books" title="Books">Books</a></li>
<li class="page_item page-item-551"><a href="http://www.hootingyard.org/regarding-mr-key" title="Regarding Mr Key">Regarding Mr Key</a></li>
<li class="page_item page-item-1186"><a href="http://www.hootingyard.org/subscriptions" title="Subscriptions">Subscriptions</a></li>
        <li class="admintab"><a href="http://www.hootingyard.org/wp-login.php?action=register">Register</a></li>    
    </ul>
</div>
</div>
0
Glenn Slaven