Computación y electrónica

Cómo hacer alineaciones al centro, a la derecha y a la izquierda con CSS

Escrito por ehow contributor | Traducido por aurelius smith

Cómo hacer alineaciones al centro, a la derecha y a la izquierda con CSS. En lugar de usar los atributos de alineación de HTML con las etiquetas de HTML que macaran el texto, la mejor opción para los diseñadores web es mover la información de presentación (opciones de alineación) a la hoja de estilo. Este artículo explicará cómo alinear texto y cómo centrar elementos grandes de la página como divs.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Necesitarás

  • Un editor de texto
  • Un editor HTML
  • Conocimiento básico sobre HTML

Lista completaMinimizar

Instrucciones

    Cómo alinear texto

  1. 1

    Para alinear texto dentro de un bloque de texto normal como un párrafo o una cita, usa la propiedad de alineación de texto.

  2. 2

    Los valores de las opciones de la propiedad de prueba de alineación son izquierda, derecha, centro y justificado. Debido a que un texto justificado no es muy fácil de leer en la web, la ilustración sólo muestra la alineación a la izquierda, a la derecha y al centro. En esta ilustración, cada párrafo tiene un borde negro para demostrar el tamaño del elemento del bloque en la página si no se aplica un ancho al mismo.

  3. 3

    Normalmente un elemento tiene asignada una identificación o clase. La alineación de texto de cualquier ítem en esa identificación o clase se realiza con una regla como estas: (izquierda) #left { text-align: left; } (derecha) #right { text-align: right; } (centro) #center { text-align: center; }

    Cómo centrar Divs, Envolvedor Divs y cuerpo

  1. 1

    Es posible que quieras centrar toda una presentación o una división grande de la misma. En esos casos usas una técnica CSS diferente.

  2. 2

    Aplicas la regla CSS a un selector de elementos más grande que quieres centrar. Es posible que sea el elemento del cuerpo, un envolvedor div o un contenedor div.

  3. 3

    Centrar con este método no afecta la alineación del texto. El elemento centrado retendrá la alineación izquierda por defecto del texto dentro del elemento centrado.

  4. 4

    La siguiente es una ilustración de un elemento de cuerpo entero centrado (con un borde negro para propósitos de clasificación) en una página. Se debe configurar un ancho para el elemento, y luego los márgenes izquierdo y derecho se configuran automáticamente. Aquí está cómo: body { width: 80%; margin-right: auto; margin-left: auto; border: 1px solid black; }

Consejos y advertencias

  • Normalmente no es necesario usar la alineación izquierda ya que es la que está por defecto. De todos modos necesitas saber que existe en caso de tener que volver a colocar un texto centrado o alineado a la derecha nuevamente a su configuración por defecto. El ancho del elemento a ser centrado puede estar definido en píxeles, porcentajes o ems.

Más galerías de fotos

comentarios

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media