Centrar texto en HTML

Autor: Tamara Smith
Fecha De Creación: 28 Enero 2021
Fecha De Actualización: 1 Mes De Julio 2024
Anonim
how to center text with html and css
Video: how to center text with html and css

Contenido

Este wikiHow te enseñará cómo centrar el texto en un sitio web HTML. Usamos CSS (hojas de estilo en cascada u hojas de estilo) para esto. Solíamos centrarnos en HTML usando el centro>etiqueta, pero esto ya no funciona en la mayoría de los navegadores.

Al paso

Método 1 de 2: uso de CSS

  1. Abra el archivo de texto en el que describe sus estilos. Ahora el centro>la etiqueta ya no se usa, cree un nuevo elemento en este archivo que centrará el texto en ciertas áreas de su documento HTML. Si no tiene un archivo CSS separado, los códigos se encuentran en la parte superior del documento HTML entre las etiquetas "style>" y "/ style>".
    • Como el estilo>- y / estilo>las etiquetas aún no están disponibles, puede colocarlas directamente debajo de cuerpo>etiqueta de la siguiente manera:
    • ! DOCTYPE html> html> cuerpo> estilo> / estilo>

  2. Crea una clase que centre el texto. La div>La etiqueta le dice a su documento HTML a qué sección específica pertenece esta clase. Escriba lo siguiente entre las etiquetas de "estilo", asegurándose de hacer clic dos veces ↵ Entrar después de la primera línea:

      div.a {}

  3. Añade el texto alineadopropiedad. Tipo alineación de texto: centro; entre los tirantes en el diva-sección. El "encabezado" ahora se ve así:

      ! DOCTYPE html> html> cuerpo> estilo> div.a {alineación de texto: centro; } / estilo>

  4. Agrega el correcto divetiqueta al texto que desea centrar. Haces esto a través del div>etiqueta encima de este texto y cerrándola con un / div>etiqueta debajo de este texto. Por ejemplo, si desea centrar un título y el párrafo debajo de él, se verá así:

      div> h1> Bienvenido a mi sitio web / h1> p> Este sitio web es principalmente para proporcionar información sobre cosas./p> / div>

  5. Utilizar el divaetiqueta para centrar otros elementos. Cuando desee centrar otro elemento, como el contenido entre las etiquetas p> / p> y h2> / h2>), escribe div> para este elemento y / div> después. Como ya ha definido "div.a" como el código CSS de centrado, estos elementos ahora también están centrados.

      estilo> div.a {alineación de texto: centro; } / style> div> h2> Las donaciones son bienvenidas / h2> p> please / p> / div>

  6. Revise su documento. Aunque el texto de su página web es, por supuesto, diferente, debería verse así:

      ! DOCTYPE html> html> cuerpo> estilo> div.a {alineación de texto: centro; } / style> div> h1> Bienvenido a mi sitio web / h1> p> Este sitio web es principalmente para proporcionar información sobre cosas. / p> / div> div> h2> Las donaciones son bienvenidas / h2> p> por favor / p> / div> / cuerpo> / html>

Método 2 de 2: uso de la etiqueta "centro" en HTML

  1. Abra su documento HTML. Este método describe cómo obtener lo obsoleto centro>etiqueta. Este método aún puede funcionar en varios navegadores, pero es mejor no depender demasiado de él.
  2. Busque el texto que desea centrar. Desplácese hacia abajo en su documento hasta que encuentre el título, párrafo u otro texto que desee centrar.
  3. Coloque la etiqueta "centro" a cada lado del texto. El código se ve así centro> texto / centro>. Aquí, "texto" es el texto que se va a centrar. Si hay otras etiquetas en este texto, como "p> / p>" antes de un párrafo, coloque las etiquetas "central" fuera de las etiquetas existentes.

      centro> h1> Bienvenido a mi sitio web / h1> / centro> centro> ¡Ponte cómodo! / centro>

  4. Verifique su documento HTML. Debería verse algo como esto:

      ! DOCTYPE html> html> cuerpo> h1> centro> Bienvenido a mi sitio web / centro> / h1> centro> ¡Hágalo fácil! / Centro> p1> Este sitio web es principalmente para proporcionar información sobre cosas./p1> / cuerpo > / html>