Cómo centrar un texto en lenguaje HTML

Coescrito por Personal de wikiHow

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

1
Abre el archivo que contiene los estilos CSS. 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:

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í:

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

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

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

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

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.
2
Busca el texto que quieras centrar. Desplázate hacia abajo hasta encontrar el encabezado, párrafo o texto que quieras centrar.
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>
```
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