"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como centralizar o texto verticalmente em uma div?

Como centralizar o texto verticalmente em uma div?

Publicado em 11/12/2024
Navegar:116

How to Center Text Vertically Within a Div?

Como alinhar verticalmente o texto em uma div

Ao trabalhar com uma div, às vezes é necessário garantir que o texto dentro dela esteja alinhado verticalmente no meio. Isso pode ser conseguido através de vários métodos.

Usando line-height

Se o div tiver uma altura fixa, como 50px, você pode simplesmente usar o line-height Propriedade CSS.

#abc {
  height: 50px;
  line-height: 50px;
}

Isso centralizará o texto verticalmente dentro do div.

Usando propriedades de exibição

Para texto de várias linhas, você pode envolvê-lo em um elemento span e aplicar propriedades de exibição e alinhamento vertical.

#abc {
  display: table;
  width: 100%;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

Usando a propriedade transform

Outro método envolve o uso da propriedade transform com a função translateY(). Isso é especialmente útil para navegadores mais antigos que não suportam propriedades de exibição.

#abc {
  position: relative;
}

#abc p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3