Comment se fait-il que je ne puisse pas centrer ce code HTML?

-1

J'essaie de centrer ce menu. Comment se fait-il que je ne puisse pas le centrer avec les deux types de moyens que j'ai essayé de centrer? J'ai essayé de le centrer avec html et css comme indiqué avec des commentaires. Je me demandais juste pourquoi, je pourrais probablement le comprendre mais cela me prendrait longtemps. Je sais que je peux le corriger avec la position: absolue, top: 50%, left: 50%; Mais même cela, comment puis-je l'utiliser dans le bon sens? Comment puis-je utiliser le positionnement absolu correctement et dans le bon sens? Aussi quelle est la position relative? À quoi cela sert-il et comment cela se compare-t-il à l'absolu? Plz et merci.Comment se fait-il que je ne puisse pas centrer ce code HTML?

Voici mon CSS:

ul { 
    text-align: center; /* How come this doesn't center it? */ 
    padding: 4px; 
    list-style-type: none; 
    margin: 0; 
    overflow: hidden; 
} 

li { 
    float: left; 
} 

a.menuItem:link, 
a.menuItem:visited { 
    display: block; 
    width: 120px; 
    font-weight: bold; 
    color: white; 
    background-color: #800000; 
    text-align: center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

a.menuItem:hover, 
a.menuItem:active { 
    background-color: black; 
}

Voici mon HTML:

<center> <!-- And how come this doesn't center it? --> 
    <ul background="/victoria/cutiepie2.jpg"> 
     <li><a href="/scripts/call.php" class="menuItem">Call</a></li> 
     <li><a href="/scripts/text.html" class="menuItem">Text</a></li> 
     <li><a href="/menu/home.html" class="menuItem">Home</a></li> 
     <li><a href="/menu/news.html" class="menuItem">News</a></li> 
     <li><a href="/menu/media.html" class="menuItem">Media</a></li> 
     <li><a href="/menu/downloads.html" class="menuItem">Downloads</a></li> 
     <li><a href="/menu/forum.html" class="menuItem">Forum</a></li> 
    </ul> 
</center>

Source

2014-07-14 Shane Martin

L'élément '

' a été abandonné sous HTML5 et ne devrait plus être utilisé. –

Un élément UL est un élément de niveau bloc, il ne peut pas être influencée par text-align: center donc qui ne fonctionne que sur les éléments en ligne tels que span, strong, em etc. Il peut être appliqué à un bloc de sorte que tous les éléments textuels ou en-ligne à l'intérieur soient centrés mais ne centrent pas le bloc. Un élément de niveau bloc s'étendra pour remplir tout l'espace horizontal et ne peut donc pas être centré sans d'abord définir sa largeur.

Une meilleure solution serait de placer une largeur dans le menu, puis définir les marges horizontales auto:

ul { 
    padding: 4px; 
    list-style-type: none; 
    overflow: hidden; 
    width: 960px; 
    margin: 0 auto; 
}

également center balises sont déconseillés, mais dans leur journée, ils ont également été utilisés pour centrer le texte.

Voici un violon montrant le menu centré: http://jsfiddle.net/7Hjvc/1/

Source

2014-07-14 10:28:54

Ah, d'accord. Je vous remercie. Je suis un débutant donc ça va me prendre un peu de temps pour arrêter de poser des questions comme ça. Mais euh, qu'est-ce que la marge automatique fait exactement, même si je le sais probablement? Mais merci. C'est juste ce dont j'avais besoin et cela a un sens complet. –

Margin auto signifie essentiellement qu'il distribuera la marge uniformément de chaque côté de l'élément auquel vous l'appliquez. Si cet élément est pleine largeur, la marge de chaque côté est 0. Si vous spécifiez une largeur, il distribuera le côté restant de chaque côté. –

Aussi, si vous êtes satisfait de la réponse, s'il vous plaît cliquez sur la cocher sur ma réponse pour l'accepter. –

Retirez le float:left de votre LI et ajoutez display: inline, par exemple

li { 
    display:inline 
}

Et retirer display:block de vos liens.

Le text-align:center sur votre UL n'a pas été centrant votre LI s parce LI sont des éléments de bloc et vous appliquaient un flotteur pour eux.

Source

2014-07-14 10:30:21

Oh, d'accord. Je vous remercie. Oui, je ne suis pas familier avec tout exactement. Et c'est pourquoi j'essaye de le faire. Comme je l'ai dit à l'autre gars. Ça va me prendre un moment pour arrêter de poser des questions comme ça. J'aurais dû savoir que c'était un elment de niveau bloc mais yeh. Je vous remercie. :) Idk pourquoi je continue à obtenir ces mauvais votes. : l Vous êtes durs à voter. Et je suppose que ma question était un peu hein. –

Je pense que vous avez un downvote pour les noms de classe inappropriés. La question était bonne à part cela, bien que ce soit un doublon possible, mais n'arrêtez pas de poser des questions, c'est la façon dont nous apprenons tous, alors ne soyez pas dissuadés. –

Comment se fait-il que je ne puisse pas centrer ce code HTML?

Répondre

Questions connexes