Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Vertical-align no CSS. Como, quando e por que usar.

    E ae galera. Estou aqui de volta, novamente, depois de uma sumida (pra variar não é verdade? :P). Mas eu juro que tentarei voltar com mais freqüência, postar mais colírios, vídeos do Videolog, etc.

    Que bom Bruno. Mas algo em especial ou só veio pra falar que está sumido?

    Não, não. Estou aqui para postar um artigo sobre uma propriedade CSS, o vertical-align, que vejo por ae que muita gente têm duvida na sua utilização, aplicação.

    Muitos desenvolvedores confundem e comparam com o atributo valign que é colocado dentro da tag <td> no HTML. Realmente é semelhante, o nome mesmo indica isso, mas as funcionalidades e aplicações são diferentes, quando não aplicada em células de tabelas.

    Legal Bruno. Então mostra ae. Quais as diferenças?

    Primeiramente, a propriedade vertical-align não é para ser aplicada em blocos e sim em elementos inline. A não ser que apliquemos em células de uma tabela, como estávamos acostumados.

    Vamos ver um exemplo de como os iniciantes utilizam a propriedade:

    Código HTML:

    <div id="box">
    Meu texto bem aqui.
    </div>

    Código CSS:

    #box {background-color:#F5F4F4;border:2px solid #CCC;height:200px;padding:5px;vertical-align:middle;width:400px;}

    Podemos ver o resultado desse exemplo aqui.

    Não vou explicar detalhadamente o que foi utilizado, pois é bem básico. A única coisa diferente usada foi o vertical-align mesmo.

    Como podemos ver, o resultado não foi satisfatório. O texto continuou no topo da div. Com isso, já podemos ver que confirma como eu disse acima, que a propriedade não funciona em blocos. 😉

    Certo Bruno. Mas como resolver isso então? (Parte 1 – line-height)

    Temos algumas variedades de resolver tal problema. A primeira seria a utilização da propriedade line-height com o mesmo valor da propriedade height. Veremos abaixo:

    #box {background-color:#F5F4F4;border:2px solid #CCC;height:200px;line-height:200px;padding:5px;width:400px;}

    Podemos ver o resultado desse exemplo aqui.

    Restrições e problemas.

    Como sempre, temos restrições nesse exemplo. Na verdade temos em tudo não é verdade?

    • Altura variável dentro do bloco;
    • Mais de uma linha dentro do bloco;

    Vamos às explicações:

    Altura variável dentro do bloco.

    Se tivermos um site dinâmico, onde a altura do elemento pode variar, teremos problemas, pois se o line-height for diferente do height, o texto não ficará centralizado.

    Mais de uma linha dentro do bloco.

    Bem grave esse problema, pois se tivermos mais de uma linha, a distância entre essas linhas ficará absurda, pois será sempre o valor do line-height, portanto, se tivermos três linhas de texto, por exemplo, teremos, no exemplo acima citado, uma altura de três vezes o line-height, pois temos três linhas e 200px de line-height, com isso, 3x200px.

    Veja o exemplo aqui.

    Certo Bruno. Mas como resolver isso então? (Parte 2 – display: table-cell)

    Lembram de eu ter dito que dentro de uma <td> e com o atributo valign fica tranquilo?

    Então tudo funcionaria se eu colocasse um display: table-cell certo? Quase. Graças ao nosso querido e amado internet explorer, não. E ainda por cima, nem no internet explorer 7 funciona. Pelo menos aqui não funcionou.

    Vamos ao exemplo:

    #box {background-color:#F5F4F4;border:2px solid #CCC;height:200px;display:table-cell;padding:5px;vertical-align:middle;width:400px;}

    Podemos ver o resultado desse exemplo aqui.

    Para quem utiliza browser, funciona perfeitamente. Mas para quem não usa, o texto continua no topo. Salve ie. 😀

    Mas então quando devo usar o vertical-align Bruno?

    Esse é o ponto que quero chegar. Como eu disse, o vertical-align são para elementos inline e não em blocos (fora os tds e ths da vida ok? 😉 ). Portanto, temos as restrições e problemas citados.

    Mostrarei alguns exemplos de como e quando usar o vertical-align.

    Alinhando imagem e texto centralizado verticalmente com o vertical-align.

    Veremos no código abaixo, como fazer para alinhar uma imagem e um texto centralizado verticalmente:

    Código HTML:

    <div id="box">
    <img src="http://brunodulcetti.com/artigos/vertical-align/macaco.jpg" alt="imagem" /> Meu texto bem aqui.
    </div>

    Código CSS:

    #box {background-color:# F7F6F1;border:2px solid #CCC;height:200px;padding:5px; width:400px;}
    #box img {vertical-align:middle;}

    Podemos ver o resultado desse exemplo aqui.

    Como podemos ver, a imagem e o texto ficaram centralizados verticalmente. Mas isso entre eles mesmo e não em relação ao bloco que os engloba.

    Tudo bem que neste exemplo eles acabaram ficando, mas porque eu retirei a propriedade height de dentro do CSS no bloco #box. Caso eu coloque um altura, não ficará mais.

    Alinhando inputs e texto centralizado verticalmente com o vertical-align.

    Veremos no código abaixo, como fazer para alinhar um input de texto e um texto centralizado verticalmente:

    Código HTML:

    <div id="box">
    Nome: <input type="text" name="txtNome" id="txtNome" />
    </div>

    Código CSS:

    #box {background-color:#F7F6F1;border:2px solid #CCC;font:80% "Trebuchet MS";padding:5px; width:400px;}
    #box input {border:1px solid #CCC;font:100% "Trebuchet MS";_vertical-align:middle;}

    Podemos ver o resultado desse exemplo aqui.

    Sim, eu sei. Eu utilizei um hack para o internet explorer 6 ou anterior. Mas fiquem tranqüilos, é só pra exemplo. Mostrarei abaixo uma solução correta para isso ;).

    O Firefox já posiciona verticalmente, sem precisar do vertical-align, mas o ie não. E colocando esta propriedade com o valor middle, o ie alinha no centro, mas o Firefox deixa o texto um pouco mais para cima.

    Qual dos dois está correto, não sei ao certo, mas como o Firefox está mais avançado em relação as CSS’s, então deduzo que ele está correto, principalmente pela próxima solução.

    Alinhando inputs e texto centralizado verticalmente com o vertical-align – Parte 2.

    Somente uma segunda solução que funciona em todos.

    Código HTML:

    <div id="box">
    <span>Nome:</span><input type="text" name="txtNome" id="txtNome" />
    </div>

    Código CSS:

    #box {background-color:#F7F6F1;border:2px solid #CCC;font:80% "Trebuchet MS";padding:5px; width:400px;}
    #box input {border:1px solid #CCC;font:100% "Trebuchet MS";vertical-align:middle;}
    #box span {vertical-align:middle;}

    Podemos ver o resultado desse exemplo aqui.

    Agora sim. Sem hacks e funcionando corretamente em todos. A diferença foi colocar um span e setar o vertical-align nele também.

    Com esse exemplo, deduzo que o Firefox está correto na renderização do exemplo anterior. Ele adiciona o vertical-align no input, deixando o texto sem. E no ie, parece que ao colocar no input, o texto já leva como padrão o vertical-align.

    Alinhando inputs e texto centralizado verticalmente com o vertical-align – Parte 3.

    A versão mais correta e semântica para este exemplo:

    Código HTML:

    <div id="box">
    <label for="txtNome">Nome:</label><input type="text" name="txtNome" id="txtNome" />
    </div>

    Código CSS:

    #box {background-color:#F7F6F1;border:2px solid #CCC;font:80% "Trebuchet MS";padding:5px; width:400px;}
    #box input {border:1px solid #CCC;font:100% "Trebuchet MS";vertical-align:middle;}
    #box label {cursor:pointer;vertical-align:middle;}

    Podemos ver o resultado desse exemplo aqui.

    Neste exemplo, utilizei o label que é o mais correto, setando o vertical-align nele e mais um cursor para diferenciar ;).

    Legal Bruno. Muito bom mesmo. Mas o vertical-align só tem o middle como valor no CSS cara?

    Acabei esquecendo de citar mais detalhes sobre essa propriedade não é verdade? Fiquem calmos, estarei falando mais sobre ela abaixo :P:

    • baseline: Valor padrão no CSS. Posiciona o elemento da linha base de acordo com seu “pai”;
    • sub: Deixa o elemento como sub-escrito;
    • super: Deixa o elemento como sobre-escrito;
    • top: Deixa o elemento alinhado ao topo do elemento que estiver mais ao topo da linha;
    • text-top: Alinha o elemento de acordo com o texto que estiver mais alto e seja seu “pai”;
    • middle: Exemplo utilizado nesse post. Deixa os elementos que estiverem com este valor alinhados ao meio com relação à eles mesmos ou à seus “pais”;
    • bottom: Alinha na base do elemento que estiver mais baixo.;
    • text-bottom: Alinha o elemento de acordo com o texto que estiver mais baixo e seja seu “pai”;
    • valor: Valor fixo em pixels, em ou %. Posiciona de acordo com o valor setado a partir da linha base do seu “pai”.

    Resumindo…

    Bom. Tentei passar aqui um pouco dessa propriedade do CSS. Ficou um pouco grande, admito, mas tentei detalhar ao máximo, sem tentar deixar massivo.

    Espero que tenham gostado e tenha sido útil. Caso tenha esquecido de algo ou falado alguma besteira, por favor, comentem que eu modifico ok? 😉

    Finalizando…

    To ficando por aqui, deixando uma homenagem ao Marrelton 😀 camarada que trabalha aqui na parte de desenvolvimento da Globo.com que se amarra nos títulos do meu Blog e talz… Akele abraço ae Elton 😉

    Akele abraço pra geral ae.

    [BBL]xhtml, webstandards, tutorial, web-standards, tableless, semantica, ie, dicas, desenvolvimento, css, artigos, vertical align[/BBL]

    [ 17/jan/2007 às 14:38hrs ] [ Por Bruno Dulcetti ] Comentários 35 Comentários |

    Categorias: Artigos,CSS,Webstandards

    35 Comentários no Post "Vertical-align no CSS. Como, quando e por que usar."

    Postar no Rec 6

    1. A qto tempo tava procurando isso … sempre me deparei com esse problema no meu trabalho e usei “css” gambiarrados … agora tudo muda …

      valeu ….

    2. Muito obrigado, obrigado mesmo.-Saúde e paz para ti!

    3. Ae Sr. Dulcetti, voltou bem! =P

      Essa propriedade foi uma dor de cabeça pra mim, levei tempo aprendendo a usar ela e o bendito IE ainda ajudava pacas, né!? O artigo ficou bom e bem explicado.

      Abraços! =)

    4. E ai Brunão!!!
      Muito bom o post, parabéns!!!
      Mais uma referência para o pessoal pesquisar…ler….

      Um grande abraço amigo!
      gio!

    5. Ótimo artigo, Bruno! Gostei muito pois ficou bem detalhado e explicou de forma bem clara as limitações e possibilidades desta propriedade

    6. E ae Brunooooo..
      Mandou bem! Artigo completão!
      Post esclareceu algumas dúvidas minha!!! ;D

    7. Fala Bruno! Valew pelo comentário lá no blog cara!

      Que bom que gostou do texto. Acho que a idéia é por ai mesmo. Mesmo que a gente “rumine” isso por semanas ou meses, uma hora algo fica original o bastante para que mereça uma tentativa de implementação da nossa parte.
      E parabéns pelos artigos aqui. Li alguns e compartilho da ideia dos amigos acima: coisa bem explicada e mastigada é muito melhor que horas de experimentos. heheheh

      Vamo que vamo! 🙂
      Abraço.

    8. show de bola galera… que bom que tah servindo pra galera…

      isso ae cosme, tentei ao máximo mastigar, tentando não ficar tão massante… Que bom q gostou 😉

      falae leo… continue postando textos como aquele que com certeza terás menções no meu blog… 😉 parabéns pelo post e valew ae pelo comentário sobre meus artigos… mastigado eh bom, mas dá um trabaaaaalho. 😀

      akele abraço.

    9. Bruno, uma dica para centralizar verticalmente imagens de tamanhos desconhecidos (dinâmicos) em todos os navegadores é usar o vertical-align: middle no elementos img e no elemento pai declarar o line-height. Como para o IE isso não é suficiente, para solucionar é só colocar um font-size no elemento pai com a metade do valor do line-height numa folha de estilo específica só para o IE.
      Usei isso recentemente nas galerias do Olhares.com que estamos convertendo:
      http://www.olhares.com/galerias/asmaisvotadas.php

    10. […] Estava com umas dificuldades e como sempre que posso faço visita aos blogs que gosto de acompanhar, encontrei o artigo vertical-align no css que estava me faltando. Eu usava e aplicava e não dava certo. Não dava pois há particularidades que precisam ser observadas. Leia o ótimo e bem-explicado artigo escrito pelo Bruno Dulcetti. […]

    11. E ai figura, maior tempão q não apareço por aki hehe. Muito bom seu artigo, bem explicado como já se falou aqui. Parabéns e sucesso!!

    12. Escelente informações, bruno, mas eu queria mesmo saber como colocar uma imagem no título de meu blog http://jacksonrubem.blogspot.com Li no Templates e Designs algumas instruções e a citação de códigos html que não tem no HTML do meu blog.
      Se puder me orientar.
      Sucesso para você e um abração da equipe do jornal O Brasileirinho http://www.obrasileirinho.com.br

    13. aumentando o tamanho da fonte no Firefox o layout fica todo desfigurado. Tenho problema de visão e nao posso aumentar o tamanho de fonte no seu blog

    14. Muito bom! Valeu a ajuda. =D

    15. nao serve pra nada esses exemplos
      nem fica centralizado quando aumenta a altura do div…

    16. e ae fabricio. eu avisei que não é referente ao bloco e sim aos elementos inline. a não ser que use o table-cell, que não funciona no IE. 😉

      aquele abraço.

    17. E ae Bruno!
      (não sei se você ainda lê os comentários deste artigo, maas, vamos tentar!)

      Estou tentando centralizar uma imagem bem no meio da tela, e faço assim:

      #box2 { height:100%; width:100%; vertical-align:middle; display:table-cell; text-align:center;}

      Duas dúvidas:
      Sei que o vertical-align não funciona com o height:100%, quando coloco em pixels funciona, por que isso?
      Porque o text-align não funciona? Tem algo a ver com o display:table-cell ?

      Valeu!

    18. Putz, obrigado pela colaboração, acabei com minhas dúvidas em relação a essa propriedade.
      Parabéns pelo Blog, referência nacional!!

    19. Realmente magnífico. A solução final para os alinhamentos na vertical. Na net cada um fala uma coisa.. e aqui você falou tudo!!!

    20. Olá Bruno,

      Sou formada em design gráfico, e estou trabalhando também com webdesign, por curiosa que sou. Aprendi há alguns meses a construir sites em DIV’s e estou refazendo o meu porfolio eletrônico. Tudo está indo bem, porém empaquei neste quesito que você escreveu acima. Ao ver meu portfolio, na parte de projetos, você verá que os textos estão todos em um iframe, e ao clicar o mouse em um respectivo número, aparece sua foto e seu texto correspondente. É aí que começa o problema, que foi relatado no seu post. A solução que encontrei foi colocar uma porcentagem no top.

      height: 238px;
      width: 213px;
      text-align: left;
      vertical-align: bottom;
      display: table-cell;
      top: 72%; /* hack para o IE6 e IE7 */
      position: absolute } /* hack para o IE6 e IE7 */

      Mas o outro problema surgido é que, como cada texto de projeto tem um número de linhas diferente (2, 3 e 4 linhas de texto), tive que criar vários id para cada altura. Será que essa é a melhor solução para esse caso?

      Abraço,
      Manuela

    21. Felipe Jeremias | 01/out/2008 às 18:40

      Ótimo Post!

      Ajudou muito! Tava com dúvida de alinhamento vertical e você esclareceu tudinho! Muito Obrigado {:

    22. […] Vertical-align no CSS. Como, quando e por que usar. » Bruno Dulcetti – web standards, css, xhtml e … E ae galera. Estou aqui de volta, novamente, depois de uma sumida (pra variar não é verdade? ). Mas eu juro que tentarei voltar com mais freqüência, postar mais colírios, vídeos do Videolog, etc. (tags: http://www.brunodulcetti.com 2008 mes9 dia8 CSS align) […]

    23. http://phrogz.net/CSS/vertical-align/index.html

      Esse site aqui mostra MUITO BEM o funcionamento do “vertical-align” dentro dos elementos, bom demaaaais!

    24. Parabéns Bruno! Muito bom o artigo. Já tinha lido sobre o vertical-align no https://developer.mozilla.org/en/CSS_Reference, mas como você disse, ele deixa de funcionar em elementos com altura definida. O jeito é esperar todo mundo deixar de usar o IE6 e 7 pra finalmente podermos usar a tão cobiçada propriedade display: table-cell.
      Agora, esse lance de alinhar verticalmente elementos de input ainda não tinha passado pela minha cabeça. Eu fazia uma gambiarra usando margin-bottom negativa. Coisa de calouro mesmo…

      Parabéns! Muito bom mesmo!

    25. Aí velhinho, procurava algo semelhante por aí e acabei achando.

      Muito bem redigido seu texto, parabéns.

    26. Meuuuuu! eu preciso de um menu exatamente igual o seu do lado esquerdo, o meu dah uns pau no IE, se puder me dar umas dicas eu agradeceria muitoooooooo.

      Se pudesse me mandar os js, o css e o html desse menu seria lindo.

      Muito obrigado

      Ailton

    27. Amigão,

      vi seu post em relacao ao vertical-align, entre uma imagem e texto.
      Minha duvida é o seguinte como seria para ser em relação ao bloco que os engloba.

    28. Gostaria de saber uma forma de colocar uma imagem na esquerda e um texto grande alinhado ao lado direito da imagem, mas esse texto tem que ficar alinhado ao centro da imagem.

      Exemplo:

      imagemimagemimagem
      imagemimagemimagem
      imagemimagemimagem
      imagemimagemimagem texto grande, e sempre alinhando automaticamente
      imagemimagemimagem pois todas as soluções que achei não conseguem colocar
      imagemimagemimagem mais de uma linha alinhada no centro, e o restante vai tudo
      imagemimagemimagem para baixo da imagem que se localiza na esquerda
      imagemimagemimagem
      imagemimagemimagem
      imagemimagemimagem

    29. Excelente post.
      Não fazia idéia de como utilizar!

    30. Olá, já descobriu alguma solução para alinha verticalmente textos com mais de uma linha?

    31. pedro henrique | 26/jan/2012 às 16:38

      faz tempo que procurava um artigo assim tão bem explicado e tão últil, muito obrigado mesmo, vcs são demais, vou divulgar para amigos e conhecidos adorei o site e os artigos bom trabalho, continuem assim….

    32. Perfeito. Salvou minha vida. Parabéns. Abs.

    33. Nei Mendess | 20/nov/2012 às 7:40

      Parabéns pelo tutorial.

      Muito boa a explicação e os detalhes.
      A interação que você usa também agrada a leitura tornando-a menos cansativa.

      Obrigado, e sucesso!

    34. O links das demos estao quebrados :'(

    35. You’ll find that the most effective atmosphere before 10pm is within Irish and Sports bars.
      Beginning with the Plaza de Cascorro, vendors line the streets on Sunday mornings, selling anything from antiques,
      leather wares, imported items, and textiles to clothing, souvenirs, and paintings.
      Valencia Football Club – There is a lots of
      popularity and craze for the club that’s generally known as Valencia FC.

    Tá esperando o quê? Comenta logo.

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com