web-dev-qa-db-fra.com

Comment centrer un élément d'ancrage en CSS?

Je veux juste avoir mon ancre au milieu de l'écran horizontalement, comment pourrais-je faire cela?

<a href="http://www.example.com">example</a>
htmlcss
50
foreyez

Ajoutez la propriété text-align css à son attribut de style parent

Par exemple:

<div style="text-align:center">
  <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>​

Ou en utilisant une classe (recommandé)

<div class="my-class">
  <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>​

.my-class {
  text-align: center;
}

Voir ci-dessous un exemple de travail:

.my-class {
      text-align: center;
	  background:green;
	  width:400px;
	  padding:15px; }
	.my-class a{text-decoration:none; color:#fff;}
<!--EXAMPLE-ONE-->
	<div style="text-align:center; border:solid 1px #000; padding:15px;">
      <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
    </div>​

	<!--EXAMPLE-TWO-->
	<div class="my-class">
      <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
    </div>​

Q: Pourquoi le style text-align n'est-il pas appliqué à l'élément a au lieu de div?

A: Le style text-align décrit comment le contenu inline est aligné dans un élément block. Dans ce cas, la div est un élément de bloc et son contenu en ligne est la a. Pour explorer davantage cette question, considérez le peu de sens d’appliquer le style text-align à l’élément a quand il est accompagné de plus de texte.

<div>
  Plain text is inline content. 
  <a href="http://www.example.com" style="text-align: center">example</a> 
  <span>Spans are also inline content</span>
</div>

Même s'il y a des sauts de ligne ici, tout le contenu de div est du contenu en ligne et produira donc quelque chose comme

Le texte brut est un contenu en ligne. exemple Les plages sont également du contenu en ligne

Cela n'a pas beaucoup de sens de voir comment "exemple" dans ce cas serait affiché si la propriété text-align lui était appliquée.

72
JaredMcAteer

écris comme ceci:

<div class="parent">
 <a href="http://www.example.com">example</a>
</div>

CSS

.parent{
  text-align:center
}
18
sandeep

Deux options, qui ont des utilisations différentes:

HTML:

<a class="example" href="http://www.example.com">example</a>

CSS:

.example { text-align: center; }

Ou:

.example { display:block; width:100px; margin:0 auto;}
13
bookcasey

essayez d’envelopper une div et d’ajouter ces styles à la div:

 width: 100%; 
 text-align:center;
3
clem
<span style="text-align:center; display:block;">
<a href="http://news.awaissoft.com">Awaissoft</a>
</span>
2
Awaissoft

Vous pouvez essayer ce code:

/**code starts here**/

a.class_name { display : block;text-align : center; }
1
Sharavnan Kv

Par défaut, une ancre est rendue en ligne, donc définissez text-align: center; sur son ancêtre le plus proche, restitué sous forme de bloc.

1
Quentin

Essayer

margin: 0 auto;
display:table

J'espère que ça aide quelqu'un. 

1
Eric K

Il y a beaucoup de façons.

<!-- Probably the most common: -->
<div style="text-align: center;"><a href="...">Link</a></div>

<!-- Getting crafty... -->
<a href="..." style="display: block; text-align: center;">Link</a></div>

Il y a probablement d'autres moyens également, mais ces trois sont probablement les plus courants.

1
Niet the Dark Absol

style="margin:0 auto; width:auto;" Essayez ça.

0
RSM

le fichier css ne peut pas être appliqué directement à l'alignement de la balise d'ancrage . Le fichier css (text-align: center;) doit être appliqué à l'élément div/élément parent pour que l'effet d'alignement ait lieu sur la balise d'ancrage.

0
Chandan Gorapalli

Je pense que vous ne pouvez pas faire cela avec des éléments intégrés tels que anchor, span. Mais pour que cela fonctionne, vous devez configurer l'affichage pour le bloquer. 

<a href="http://www.example.com" style="text-align:center;display:block;">example</a>
0
VJAI