¿Cómo centro un elemento de anclaje en CSS?

Question

Solo quiero tener mi ancla en el medio de la pantalla horizontalmente, ¿cómo podría hacer esto?

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

Answer 1

añadir la propiedad css text-align a su atributo de estilo padre

Ej:

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

O usando una clase (recomendado)

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

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

---

Véase más adelante ejemplo de trabajo:

.my-class { 
 
     text-align: center; 
 
\t background:green; 
 
\t width:400px; 
 
\t padding:15px; } 
 
\t .my-class a{text-decoration:none; color:#fff;}

<!--EXAMPLE-ONE--> 
 
\t <div style="text-align:center; border:solid 1px #000; padding:15px;"> 
 
     <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 
 
    </div>​ 
 

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

---

Q: ¿Por qué no el estilo text-align obtener aplicado al elemento en lugar del diva?

A: El estilo text-align describe cómo inline contenido está alineado dentro de un elemento block. En este caso, el div es un elemento de bloque y su contenido en línea es a. Para explorar más a fondo esta cuenta cómo poco sentido tendría para aplicar el estilo text-align al elemento a cuando se acompaña de más texto

Aunque hay diversas son saltos de línea aquí todos los contenidos de div están contenidos en línea y por lo tanto producirá algo como:

El texto sin formato es contenido en línea. example Los tramos son también contenidos en línea

Eso no tiene' mucho sentido en cuanto a cómo 'ejemplo' en este caso se mostrará si la propiedad text-align se aplicara que él.

Answer 2

tratan de envolver un div alrededor y añadir estos estilos para el div:

width: 100%; 
text-align:center; 

Answer 3

Por defecto un ancla se hace en línea, así que ponga text-align: center; en su ancestro más cercano que hace como un bloque.

Answer 4

style="margin:0 auto; width:auto;" Pruébalo.

Answer 5

escritura como esto:

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

CSS opciones

.parent{ 
    text-align:center 
} 

Answer 6

dos, que tienen diferentes usos:

HTML:

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

CSS:

.example { text-align: center; } 

O:

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

Answer 7

creo que no se puede hacer eso con los elementos en línea como ancla, palmo. Pero para hacerlo funcionar, debe configurar la pantalla para que bloquee.

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

Answer 8

Hay muchas formas.

<!-- 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> 

Probablemente existan otras formas también, pero estas tres son probablemente las más comunes.

Answer 9

css no se pueden aplicar directamente para la alineación de la etiqueta de anclaje. El css (text-align: center;) se debe aplicar al div elemento/elemento para que el efecto de alineación tenga lugar en la etiqueta de anclaje.

Answer 10

Sólo hay que poner entre las etiquetas del centro:

<center>><Your text here>></center> 

Answer 11

<span style="text-align:center; display:block;"> 
<a href="http://news.awaissoft.com">Awaissoft</a> 
</span> 

Answer 12

Trate

margin: 0 auto; 
display:table 

Espero que ayude a alguien.

Answer 13

Puede probar este código:

/**code starts here**/ 

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