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

Question

Je me suis posé des questions sur quelque chose qui devrait être très facile, mais après trois heures infructueuses, je ne l'ai toujours pas résolu :

Un ami m'a demandé de corriger le modèle de son site web WordPress afin que la barre de menu de navigation horizontale soit centrée horizontalement sur la page. Il souhaite qu'elle s'insère parfaitement dans le milieu inférieur de la section rouge - elle s'insèrerait alors entre les deux emblèmes de chaque côté de la page rouge.

La section rouge ( class="header" ) a text-align réglé sur center . Cela semble suffisant pour garantir que le titre et le texte de description situé en dessous soient alignés au centre, mais pour une raison quelconque, je ne parviens pas à faire en sorte que le menu (qui est un fichier de type ul ) s'alignent sur le centre de la page.

Quelqu'un pourrait-il me dire ce que je fais de mal ? Comment se fait-il que je ne parvienne pas à centrer le menu ? Que dois-je changer dans la feuille de style pour que cela fonctionne ?

Answer 1

Pour centrer une rangée de blocs, vous devez utiliser inline-block :

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

IE ne comprend pas l'inline-block, mais si vous le définissez inline juste pour IE, il se comportera toujours comme un inline-block :

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

Answer 2

1 Écrire style="text-align: center;" pour les parents div de ul

2 Écrire style="display: inline-table;" a ul

2 Écrire style=" display: inline;" a 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>

Finition

Answer 3

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

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

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

et donnez au ul.menu ceci

margin:0 auto;
width:535px;

Le seul problème ici est que vous définissez la largeur de la liste de menu, 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é).

UPDATE : J'ai remarqué votre commentaire ci-dessus concernant le fait de ne pas définir la largeur manuellement. Si vous êtes prêt à utiliser un petit peu de javascript, vous pouvez placer ceci à l'intérieur du bloc "document prêt" et supprimer la balise width: 535px;

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

Cela permettra de définir la propriété css width sur la largeur réelle rendue une fois la page chargée, afin que la mise en page fonctionne.

Compléter le HTML 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>

Answer 4

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

Answer 5

Comme il est positionné de manière absolue, vous pouvez lui donner un attribut gauche :

.menu { left : 125px ; }

125px ou plus devraient suffire