Alineación CSS

La alineación CSS especifica que alineamiento horizontal y vertical que tendrá el contenido de una etiqueta HTML o la misma etiqueta.

Etiquetas alineadas al centro

Para centrar horizontal una etiqueta de nivel de bloque como <div>, podemos especificarle la declaración margin: auto;.

Especificar el ancho a una etiqueta HTML evita que se ajuste a los limites de su etiqueta contenedora y el espacio restante se dividirá en partes iguales en sus margenes:

div.centrada {
  margin: auto;
  width: 50%;
  padding: 5px;
  border: thin solid black;
}

Muestra:

Esta etiqueta <div> está centrada.

Nota: Alinear una etiqueta al centro con margin no tendrá efecto si width no es especificado o es el 100% del espacio de su etiqueta contenedora.

La propiedad text-align

Para alinear horizontalmente el contenido de nivel de línea de una etiqueta HTML se utiliza la propiedad text-align del CSS. Los valores para la propiedad text-align son:

left : Alinea el contenido a la izquierda.
right : Alinea el contenido a la derecha.
center : Centra el contenido.
justify : Ajusta las líneas del contenido para que cada línea sean del mismo ancho.
initial : Le especifica el valor predeterminado de la etiqueta.
inherit : Hereda el valor de la etiqueta contenedora.

p.izquirda {
 text-align: left; 
}
p.deracha {
  text-align: right;
}
p.centrado {
  text-align: center;
}
p.justificado {
  text-align: justify;
}

Muestra Izquierda:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.

Muestra Derecha:

Muestra Centrado:

Muestra Justificado:

Centrar una imagen con nivel de bloque

Para centrar una imagen, se declaran los margenes a auto y la visualización a nivel de bloque.

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Muestra:

Alinear usando posicionamiento

Otro método para alinear etiquetas es usando la declaración position: absolute;.

.derecha {
  position: absolute;
  right: 0;
  width: 300px;
  border: thin solid gray;
  padding: 10px;
}

Nota: El posicionamiento absoluto de etiquetas es removido del flujo normal de la página y puede sobreponerse a otras etiquetas.

Alinear usando flotamiento

Otro método para alinear etiquetas es usando la propiedad float ya sea con left o right.

.derecha {
  float: right;
  width: 300px;
  border: thin solid gray;
  padding: 10px;
}

Nota: Si altura de una etiqueta flotante es mayor que la etiqueta contenedora, esta tendrá desbordamiento fuera de su contenedor. Se puede usar la declaración overflow: auto; para evitarlo.

.desbordamiento {
  overflow: auto;
}

La propiedad vertical-align

La propiedad vertical-align especifica el alineamiento vertical en una línea de contenido o el contenido en una celda en una tabla, es decir, puede ser usado en dos contextos:

Para alinear verticalmente una etiqueta en la línea del contenido, obviamente la etiqueta a alinear debe tener el nivel de línea.
Para alinear verticalmente todo el contenido de una celda de una tabla.

Los valores para la propiedad vertical-align son:

Valor	Descripción	Nivel
baseline	La etiqueta es alineada en base a su etiqueta contenedora. Este es el valor predeterminado.	línea
valor por unidad	Unidad de valor como px, cm, %, etc. Se permiten valores negativos. El porcentaje es en relación al line-height.	línea
sub	La etiqueta es alineada como subindice de la línea del contenido.	línea
super	La etiqueta es alineada como superindice de la línea del contenido.	línea
top	La etiqueta es alineada en lo más alto de la celda de una tabla.	celda
text-top	La etiqueta es alineada en lo más alto de la línea del contenido.	línea
middle	La etiqueta es alineada en medio de la celda de una tabla.	celda
bottom	La etiqueta es alineada en lo más bajo de la celda de una tabla.	celda
text-bottom	La etiqueta es alineada con lo más bajo de la línea del contenido.	línea
initial	La etiqueta es alineada al valor predeterminado.	global
inherit	La etiqueta hereda el alineamiento de la etiqueta contenedora.	global

Nota: La propiedad vertical-align solo aplica para el alineamiento en línea o para el contenido en una celda de una tabla, no funciona para alinear el contenido de una etiqueta a nivel de bloque.


img.a {
 vertical-align: baseline;
}
img.b {
 vertical-align: 2px;
}
img.c {
 vertical-align: text-top;
}
img.d {
 vertical-align: text-bottom;
}
img.e {
 vertical-align: sub;
}
img.f {
 vertical-align: super;
}