web-dev-qa-db-fra.com

Comment centrer des liens en HTML

Je suis vraiment nouveau en HTML et je me demandais comment centrer plusieurs liens avec du HTML?

J'ai essayé :

  <a href="http//www.google.com"><p style="text-align:center">Search</a>

Mais le problème est quand j'essaie de mettre d'autres liens derrière, par exemple:

 <a href="http//www.google.com"><p style="text-align:center">Search</a><a href="Contact Us"><p style="text-align:center">Contact Us</a></p>

Il les place simplement sur des lignes distinctes. Je pense que cela se produit à cause du <p> fonction ... mais je ne connais que le HTML, je sais que vous pouvez le faire en CSS mais je me demandais si cela pouvait être fait en utilisant uniquement du HTML.

Merci pour toute aide!

htmlcentercentering
17
yoshyosh

il y a quelques erreurs dans votre code - la première: vous ne vous avez pas fermé p- tag:

<a href="http//www.google.com"><p style="text-align:center">Search</p></a>

suivant: p signifie 'paragraphe' et est un élément de bloc (donc il provoque un saut de ligne). ce que vous vouliez utiliser il y a un span, qui est juste un élément en ligne pour le formatage:

<a href="http//www.google.com"><span style="text-align:center">Search</span></a>

mais si vous souhaitez simplement ajouter un style à votre lien, pourquoi ne pas définir directement le style de ce lien:

<a href="http//www.google.com" style="text-align:center">Search</a>

au final, ce serait au moins du bon html, mais toujours pas exactement ce que vous voulez, car text-align:center centre le texte dans cet élément , vous devez donc le définir pour l'élément que contient ces liens (ce morceau de code HTML n'est pas publié, donc je ne peux pas vous corriger, mais j'espère que vous comprenez) - pour le montrer, je vais utiliser un simple div :

<div style="text-align:center">    
  <a href="http//www.google.com">Search</a>
  <!-- more links here -->
</div>

EDIT: quelques ajouts à votre question:

  • p n'est pas une 'fonction', mais vous avez raison, cela cause le problème (car c'est un élément de bloc)
  • ce que vous essayez d'utiliser est css - c'est juste en ligne au lieu d'être placé dans un fichier séparé, mais vous ne faites pas "juste HTML" ici
28
oezi

Puisque vous avez une liste de liens, vous devez les marquer comme une liste (et non comme des paragraphes).

Listamatic a n tas d'exemples sur la façon dont vous pouvez créer des listes de liens , y compris un certain nombre qui sont des listes verticales avec chaque lien centré (ce que vous semblez chercher après). Il a également n tutoriel qui explique les principes .

Cette partie du style se résume essentiellement à "Set text-align: center sur un élément qui s'affiche sous forme de bloc contenant le texte du lien "(qui peut être l'ancre elle-même (si vous la faites afficher sous forme de bloc) ou l'élément de liste qui le contient.

4
Quentin

vous les mettriez dans un <p> ou un <div>

<p style="text-align:center">
    <a href="http//www.google.com">Search</a> 
    <a href="Contact Us">Contact Us</a>
</p>

exemple: http://jsfiddle.net/X8HM4/1/

2
太極者無極而生

Le <p> apparaîtra sur une nouvelle ligne. Essayez de regrouper tous vos liens dans une seule balise <p>:

<p style="text-align:center;"><a href="http//www.google.com">Search</a><a href="Contact Us">Contact Us</a></p>
2
charliegriefer