Cómo centrar un texto en lenguaje HTML

Este wikiHow te enseñará cómo centrar el texto de un sitio web HTML usando hojas de estilo en cascada (CSS). Anteriormente, para centrar un texto en HTML, se utilizaba la etiqueta <center> , pero esta etiqueta ya se considera obsoleta y en la mayoría de los navegadores ya no funciona. ^{[1]
X
Fuente de investigación}

Método 1

Método 1 de 2:

Utilizar CSS

Descargar el PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/da\/2974143-7.jpg\/v4-460px-2974143-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/da\/2974143-7.jpg\/v4-728px-2974143-7.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Si bien la etiqueta <center> es obsoleta, puedes crear un nuevo elemento y agregarlo en cualquier parte de la página para centrar el texto que está dentro de los límites. Si el código CSS no está en un archivo separado, probablemente esté en el archivo HTML, entre las etiquetas "<style>" y "</style>". ^{[2]
X
Fuente de investigación}

Anuncio

Si todavía no tienes etiquetas <style> y </style> , agrégalas justo debajo de <body> en la parte superior del archivo tal como se muestra a continuación:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 style 
 > 
 </ 
 style 
 > 
```

Crea una clase para centrar el texto. La etiqueta <div> hace referencia a una sección específica del texto dentro del documento HTML, por lo tanto, debes crear una clase para esa etiqueta. Escribe el siguiente código en el espacio que está entre las etiquetas "style", asegurándote de presionar la tecla ↵ Enter dos veces después de la primera línea:

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ef\/2974143-8.jpg\/v4-460px-2974143-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ef\/2974143-8.jpg\/v4-728px-2974143-8.jpg","smallWidth":460,"smallHeight":349,"bigWidth":728,"bigHeight":553,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

 div 
 . 
 a 
 { 
 }

Agrega la propiedad text-align . Escribe text-align: center; en el espacio que está entre las llaves de la sección div.a . El encabezado ahora deberá quedar así:

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/97\/2974143-9.jpg\/v4-460px-2974143-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/97\/2974143-9.jpg\/v4-728px-2974143-9.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

 <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 style 
 > 
 div 
 . 
 a 
 { 
 text-align 
 : 
 center 
 ; 
 } 
 </ 
 style 
 >

Agrégale la etiqueta div correspondiente al texto que quieras centrar. Para hacerlo, coloca la etiqueta div class="a" arriba del texto que quieras centrar y luego la etiqueta de cierre </div> debajo del mismo. Por ejemplo, para centrar un encabezado y el texto de su párrafo, deberás ingresar el siguiente código:

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7e\/2974143-11.jpg\/v4-460px-2974143-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7e\/2974143-11.jpg\/v4-728px-2974143-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

 < 
 div 
 class 
 = 
 "a" 
 > 
 < 
 h1 
 > 
 Bienvenidos 
 a 
 mi 
 sitio 
 web 
 </ 
 h1 
 > 
 < 
 p 
 > 
 El 
 principal 
 propósito 
 de 
 este 
 sitio 
 web 
 es 
 mostrar 
 información 
 sobre 
 las 
 cosas 
 .</ 
 p 
 > 
 </ 
 div 
 >

Utiliza la etiqueta div.a para centrar otras áreas. Si quieres centrar otros elementos (por ejemplo, contenido ubicado entre otras etiquetas como <p></p> y <h2></h2> ) escribe <div class="a"> antes del elemento y </div> después de él. Como ya has especificado "div.a" como comando para centrar, el texto se centrará tal como se hizo anteriormente:

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/87\/2974143-12.jpg\/v4-460px-2974143-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/87\/2974143-12.jpg\/v4-728px-2974143-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

 < 
 style 
 > 
 div 
 . 
 a 
 { 
 text-align 
 : 
 center 
 ; 
 } 
 </ 
 style 
 > 
 < 
 div 
 class 
 = 
 "a" 
 > 
 < 
 h2 
 > 
 Se 
 aceptan 
 donaciones 
 </ 
 h2 
 > 
 < 
 p 
 > 
 ¡ 
 por 
 favor 
 !</ 
 p 
 > 
 </ 
 div 
 >

Revisa tu documento. Si bien el contenido va a ser distinto, tu documento deberá verse parecido al siguiente: ^{[3]
X
Fuente de investigación}

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0d\/2974143-13.jpg\/v4-460px-2974143-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0d\/2974143-13.jpg\/v4-728px-2974143-13.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

 <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 style 
 > 
 div 
 . 
 a 
 { 
 text-align 
 : 
 center 
 ; 
 } 
 </ 
 style 
 > 
 < 
 div 
 class 
 = 
 "a" 
 > 
 < 
 h1 
 > 
 Bienvenidos 
 a 
 mi 
 sitio 
 web 
 </ 
 h1 
 > 
 < 
 p 
 > 
 El 
 principal 
 propósito 
 de 
 este 
 sitio 
 web 
 es 
 mostrar 
 información 
 sobre 
 las 
 cosas 
 .</ 
 p 
 > 
 </ 
 div 
 > 
 < 
 div 
 class 
 = 
 "a" 
 > 
 < 
 h2 
 > 
 Se 
 aceptan 
 donaciones 
 </ 
 h2 
 > 
 < 
 p 
 > 
 ¡ 
 por 
 favor 
 !</ 
 p 
 > 
 </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >

Método 2

Método 2 de 2:

Usar la etiqueta <center> en HTML

Descargar el PDF

1

Abre tu documento HTML. Este método te enseñará a usar la etiqueta <center> , que ahora es obsoleta. Actualmente (enero de 2019), esta etiqueta todavía funciona en algunos navegadores web. Sin embargo, se recomienda utilizar otra alternativa que siga funcionando a largo plazo.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/2974143-2.jpg\/v4-460px-2974143-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/2974143-2.jpg\/v4-728px-2974143-2.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Desplázate hacia abajo hasta encontrar el encabezado, párrafo o texto que quieras centrar.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cd\/2974143-3.jpg\/v4-460px-2974143-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cd\/2974143-3.jpg\/v4-728px-2974143-3.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
Agrega la etiqueta "center" en ambos lados del texto. La etiqueta "center" se usa con el formato <center>texto</center> donde "texto" representa a tu texto. Si tu texto tiene etiquetas (por ejemplo, "<p></p>") las etiquetas "center" deben ir fuera de las que ya están:
```
 < 
 center 
 >< 
 h1 
 > 
Bienvenidos a mi sitio web </ 
 h1 
 ></ 
 center 
 > 
 < 
 center 
 > 
¡Siéntanse como en casa! </ 
 center 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cb\/2974143-4.jpg\/v4-460px-2974143-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cb\/2974143-4.jpg\/v4-728px-2974143-4.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
Revisa tu documento HTML. El documento ahora deberá parecido a este: ^{[4]
X
Fuente de investigación}
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 >< 
 center 
 > 
Bienvenidos a mi sitio web </ 
 center 
 ></ 
 h1 
 > 
 < 
 center 
 > 
¡Siéntanse como en casa! </ 
 center 
 > 
 < 
 p1 
 > 
El principal propósito de este sitio web es mostrar información sobre las cosas. </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```
Anuncio

[1]

[2]

[3]

[4]

Iniciar sesión

Cómo centrar un texto en lenguaje HTML

Pasos

Utilizar CSS

Usar la etiqueta <center> en HTML

wikiHows relacionados

Referencias

Acerca de este wikiHow

¿Te ayudó este artículo?

Artículos relacionados

¡Suscríbete al boletín gratuito de wikiHow!

Compartir

Artículos destacados

Tendencias de tutoriales

Artículos destacados

Vídeos destacados

Artículos destacados

Artículos destacados

Artículos destacados

Explore Categories