Como centralizar verticalmente um intervalo dentro de uma div

O alinhamento vertical pode ser complicado em CSS, e alinhar um intervalo dentro de um div não é exceção.

Compreendendo o alinhamento CSS

Antes de mergulhar nas soluções, é crucial entender o alinhamento vertical em CSS:

• Alinhamento natural: Os elementos embutidos (como span) são alinhados naturalmente na linha de base, que é a parte inferior do caractere mais baixo.
• Line Height: A propriedade line-height define a altura de uma caixa de linha, que envolve o caractere e qualquer caractere inicial. espaço.
• Altura intrínseca: A altura intrínseca de um elemento é o espaço que ele ocupa sem qualquer estilo ou preenchimento.

Técnicas de alinhamento vertical

Para centralizar um intervalo verticalmente dentro de um div, considere estas técnicas:

1. Correspondendo a altura da linha à altura do contêiner:

Defina a altura da linha do intervalo para corresponder à altura do div. Por exemplo, se o div tiver 15px de altura, defina line-height: 15px; no intervalo.

2. Posicionamento Absoluto:

Definir posição: absoluto; na div e na posição: absoluto; topo: 50%; no vão. Em seguida, ajuste o valor da margem superior do intervalo para metade de sua altura intrínseca.

3. Transformar: traduzirY

Use a transformação: traduzirY(-50%); propriedade no vão. Isso desloca verticalmente o vão pela metade de sua altura intrínseca.

4. Flexbox

Utilize o Flexbox para centralizar verticalmente o vão. Definir exibição: flexível; alinhar itens: centro; na div e na margem: auto; no intervalo.

Amostra de código

Aqui está um exemplo usando o método line-height:

  as