Atributo align-self CSS

Definición y uso

align-self El atributo especifica el modo de alineación del elemento seleccionado dentro del contenedor flexible.

Nota:El atributo align-self sobrescribe el atributo align-items del contenedor flexible. align-items Atributos.

Vea también:

Tutoriales de CSS:CSS Grid

Tutoriales de CSS:CSS Flexbox

Manual de referencia de CSS:Atributo alignContent

Manual de referencia de CSS:Atributo alignItems

Manual de referencia de CSS:Atributo justifySelf

Manual de referencia de HTML DOM:Atributo alignSelf

Ejemplo

Centrar uno de los elementos dentro de un elemento flexible:

#myBlueDiv {
  align-self: center;
}

Pruebe usted mismo

Sintaxis de CSS

align-self: auto|stretch|center|flex-start|flex-end|linea base|initial|inherit;

Valor del atributo

Valor Descripción
auto Predeterminado. El elemento hereda el atributo align-items del contenedor padre, si no hay contenedor padre,则为 "stretch".
stretch El elemento se estira para adaptarse al contenedor.
center El elemento se encuentra en el centro del contenedor.
flex-start El elemento se encuentra en el extremo izquierdo del contenedor.
flex-end El elemento se encuentra en el extremo derecho del contenedor.
linea base El elemento se ubica en la línea base del contenedor.
initial Establezca este atributo en su valor predeterminado. Vea: initial.
inherit Hereda este atributo del elemento padre. Vea: inherit.

Detalles técnicos

Valor predeterminado: auto
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.alignSelf="center"

Compatibilidad del navegador

Los números en la tabla indican la primera versión de navegador que admite completamente esta propiedad.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0