Pouvez-vous m’aider à centrer un élément avec CSS?

J’ai été insortinggué 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 réparer le modèle de son site WordPress afin que la barre de menu de navigation horizontale soit centrée horizontalement sur la page. Il veut qu’il s’ajuste parfaitement au milieu de la section rouge, puis qu’il serait juste entre les deux emblèmes de chaque côté de la page rouge.

La section rouge ( class="header" ) est text-align sur text-align . Cela semble être assez bon pour garantir que le titre et le texte de description sous celui-ci sont centrés, mais pour une raison quelconque, je ne peux pas aligner le menu (qui est un ul ) avec le centre de la page.

Quelqu’un voudrait-il suggérer ce que je fais mal? Pourquoi est-ce que je ne peux pas centrer le menu? Qu’est-ce que je dois changer dans la feuille de style pour que cela fonctionne?

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

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

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

  

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

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

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

   

terminer

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 les styles suivants

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

et donner le ul.menu cette

 margin:0 auto; width:535px; 

La seule chose à faire ici est que vous définissez la largeur de la liste des menus, donc si la largeur des éléments de menu change, vous devrez également la modifier dans le fichier CSS (si un nouvel élément de menu est ajouté).

MISE À JOUR: Juste remarqué votre commentaire ci-dessus à propos de ne pas définir la largeur manuellement. Si vous êtes prêt à utiliser un peu de javascript, vous pouvez le coller dans le bloc de document prêt et supprimer la 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 à la largeur réelle rendue une fois la page chargée, de sorte que la mise en page fonctionnera.

HTML complet ci-dessous:

  

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

Comme il est positionné en absolu, vous pouvez lui atsortingbuer un atsortingbut gauche:

.menu {gauche: 125px; }

125px ou alors devrait être bon