Visual Dicas News

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 de ...

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 ...

Neste tutorial mostraremos como criar e alterar um Servidor Virtual (VirtualHost) no Wamp Server, Version 3.0 ou superior, no sistema operacional Windows. (adsbygoogle = window.adsbygoogle || [])....

Neste tutorial mostraremos como identificar o número de likes do Facebook de qualquer link utilizando PHP e JSON ( "Javascript Object Notation"). (adsbygoogle = window.adsbygoogle || []).push({});...

Neste exemplo vamos mostrar como passar variáveis definidas em PHP para o JavaScript. Este procedimento é muito útil quando utilizamos PHP e JavaScript relacionados. Veja também: Passar variável Ja...

  Neste exemplo vamos mostrar como passar variáveis definidas em JavaScript para o PHP. Este procedimento é muito útil quando utilizamos PHP e JavaScript relacionados. Veja também: Passar variável...

More Articles

    More From: CSS Tabelas Web Servers PHP

    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. Agora vamos  mostrar o pulo do gato para você centralizar o texto verticalmente da forma mais simples possível: Vamos inserir na classe CSS  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