A propriedade align-content para layouts de bloco agora faz parte do valor de referência.

Rachel Andrew

Publicado em: 17 de abril de 2024

Agora você pode usar a propriedade align-content do alinhamento de caixa do CSS em layouts de bloco e tabela. Isso permite o alinhamento da direção do bloco sem precisar criar um layout flexível ou de grade.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 125.
  • Safari: 17.4.

A tarefa antes impossível de centralizar um item verticalmente ficou mais fácil com o flexbox e a grade, além da propriedade align-content. No entanto, isso envolveu a criação de um layout flexível ou de grade apenas para fazer esse alinhamento. A propriedade foi especificada para layout de bloco, e nos últimos meses todos os três principais mecanismos lançaram o recurso.

Com o align-content disponível para o layout de bloco, é possível alcançar o alinhamento vertical sem precisar criar um layout flexível ou de grade para que a propriedade funcione. Nenhuma propriedade adicional é necessária, já que o item continua sendo um item de bloco. A única mudança é no alinhamento.

A propriedade align-content centraliza o cabeçalho verticalmente em um contêiner de bloco.