Visual Dicas News

Neste tutorial, vamos mostrar criar números aleatórios utilizando JavaScript. No exemplo, mostraremos um joguinho da tabuada onde o usuário deverá visualizar 2 números aleatórios entre 0 e 9, e ac...

  Neste tutorial vamos mostrar como criar uma janela pop up utilizando HTML e Javascript. Nosso objetivo é criar janelas pop up simples e que se abrem a partir de um clique em um link ou em um botão ...

Neste tutorial, vamos criar botões personalizados com efeito 3D utilizando HTML e CSS. Nosso objetivo é criar botões simples, porém visualmente atraentes para serem utilizados nos layouts de sites o...

Neste tutorial, vamos mostrar como como manipular propriedades CSS usando JavaScript. No exemplo, mostraremos como alterar o estilo de algumas propriedades CSS, como cor, tipo e estilo da fonte, e...

Neste tutorial mostraremos como subtrair ou somar dias de uma data qualquer - utilizando a função strtotime(). (adsbygoogle = window.adsbygoogle || []).push({}); Função Strtotime / Função Date (...

Neste tutorial vamos mostrar as diferenças em utilizar block, inline, inline-block e none para a propriedade CSS display. A utilização destes elementos é muito importante para o controle visual de u...

  Neste tutorial vamos mostrar como transformar uma lista HTML com CSS. Como a lista HTM é posicionada verticalmente, podemos altrerá-la para que fique posicionada horizontalmente. Isto é muito ú...

Neste tutorial, vamos mostrar como adicionar conteúdo em um elemento HTML utilizando JavaScript. No exemplo, mostraremos como acrescentar itens em uma lista e parágrafos em um texto HTML. Observa...

Neste tutorial, vamos mostrar como centralizar um texto verticalmente dentro de uma tag HTML usando a propriedade CSS line-height. Este método elimina a necessidade de cálculos de padding, além d...

Tabela de Cores HTML

(adsbygoogle = window.adsbygoogle || []).push({}); Cor Código Java Código HTML Snow 255 250 250 #FFFAFA GhostWhite 248 248 255 #F8F8FF WhiteSmoke 245 ...

More Articles

More From: JavaScript CSS PHP Tabelas Web Servers

Neste tutorial, vamos mostrar como centralizar um texto verticalmente dentro de uma tag HTML <div> usando a propriedade CSS line-height. Este método elimina a necessidade de cálculos de padding, além de reduzir o número de informações no seu código CSS.

Atenção: Este método só é válido quando existe apenas uma linha na <div>.

HTML

1. Primeiro criamos a <div> onde vai o nosso texto.

<div class="top">
	<h1>Eu sou um título da página</h1>
</div>

 Veja como ficam nossos elementos HTML sem estilos:


Eu sou um título da página


CLASSES CSS

2. Agora vamos criar a classe "top" que irá definir o estilo para a <div> onde está o nosso texto. Nesta fase ainda não vamos alinhar o texto verticalmente:

.top {
  width:50%;
  height:90px;
  text-align:center;
  margin:auto;
  background-color:#ff0000;
  font-family:Arial;
  color:#fff; 
}

     Onde:

  • width - Define a largura da div (que é 50% da largura total da página onde ficará a div);
  • height - Define a altura da div em pixels;
  • text-align - Centraliza o texto horizontalmente;
  • margin: auto - Centraliza a div horizontalmente na página;
  • background-color - Define a cor do fundo da div;
  • font-family - Define a fonte do texto;
  • color - Define a cor do texto;

Observação: Uma classe CSS poderá ser colocada no próprio documento HTML através das tags <style> </style> ou inseridas em uma arquivo ".css" externo.

 Veja abaixo como ficou o nosso exemplo sem a centralização vertical do texto:

Eu sou um título da página

CENTRALIZANDO O TEXTO VERTICALMENTE

3. Vamos agora mostrar o pulo do gato para você centralizar o texto verticalmente da forma mais simples possível: Na classe CSS "top", acrescente a propriedade line-height com o mesmo tamanho da altura do elemento div onde está o texto. No nosso exemplo, a propriedade line-height deverá ter o mesmo valor de height, que é 90px. Veja como fica o nosso código CSS final:

.top {
  width:50%;
  height:90px;
  line-height:90px;
  text-align:center;
  margin:auto;
  background-color:#ff0000;
  font-family:Arial;
  color:#fff; 
}

 DICA: Para centralizar imagens verticalmente, utilize a propriedade vertical-align.

RESULTADO FINAL

Veja agora o nosso texto centralizado verticalmente:

See the Pen MvGxRO by Angelo Luis Ferreira (@angeloalf) on CodePen.

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foi feito o alinhamento vertical do texto do exemplo. No editor, altere os códigos da forma que você desejar até conseguir o design desejado. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados).

Tente você mesmo »  

CÓDIGO COMPLETO DO EXEMPLO

Para copiar e colar nos seus projetos.

HTML

<div class="top">
	<h1>Eu sou um título da página</h1>
</div> 

 CSS

.top {
  width:50%;
  height:90px;
  line-height:90px;
  text-align:center;
  margin:auto;
  background-color:#ff0000;
  font-family:Arial;
  color:#fff; 
} 

 

COMENTÁRIOS

Blog Visual Dicas

Visual Dicas - A sua fonte de informação!

Controle o seu mundo com pro Conheça o nosso blog Visual Dicas, onde apresentamos dicas de Informática, Internet, Blogs, Software, Hardware, Tecnologia, Gestão Empresarial, RH, Treinamento e Cursos Online.

Visual Dicas

Squids Arduino

Controle o seu mundo com projetos e ideias para automação, robótica e dispositivos inteligentes. Venha conhecer e compartilhar experiências em projetos na plataforma Arduino.

Squids Arduino

Blogolista.com

O Blogolista.com é um site para a divulgação, promoção e publicidade de blogs. Aqui no Blogolista você encontrará os melhores Links e Blogs da atualidade.

Blogolista.com

JSN Epic template designed by JoomlaShine.com