Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

A propriedade CSS vertical-align

Publicado em: 2006-07-17 — 474.173 visualizacoes

A propriedade CSS vertical-align foi introduzida com as CSS-1 (ampliada nas CSS-2 com a introdução do valor <medida CSS>) e admite os seguintes valores:

baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit |
<percentagem> | <medida CSS>
  

É uma propriedade que tende a frustar os iniciantes em CSS, que esperam dela um comportamento semelhante ao atributo HTML vertical-align que estão acostumados a usar.

Seguindo o raciocínio da dita semelhança, tentam posicionar um texto dentro de um elemento DIV com essa propriedade. E, surpresa! Não dá certo. Tentam com todos os valores acima mostrados e nada!

Exemplo ilustrando o valor middle:

CSS:

div#falhou {
 font:12px Arial, Sans-serif;
 width: 200px;
 height: 150px;
 border: 1px solid #c30;
 background: #ffe;
 vertical-align: middle;
 }

HTML:

<div id="falhou">
Texto no meio da DIV
</div> 

Que resulta em fracasso (o texto não ‘vai’ para o meio) conforme mostrado a seguir:

Texto no meio da DIV

Na maioria dos casos este é o primeiro contato que o iniciante tem com esta propriedade e a partir daí esquece e não se preocupa mais com ela pois ‘descobre’ que pode controlar o alinhamento vertical do texto, usando a propriedade line-height assim:

CSS:

div#sucesso { 
 font:12px Arial, Sans-serif;
 width: 200px;
 height: 150px;
 border: 1px solid #c30;
 background: #ffe;
 line-height:150px;
 }

HTML:

<div id="sucesso">
Texto no meio da DIV
</div> 

Que resulta em sucesso (o texto ‘vai’ para o meio) conforme mostrado a seguir:

Texto no meio da DIV

Afinal para que serve esta propriedade?

As Recomendações do W3C dizem que a propriedade vertical-align destina-se a alinhar textos verticalmente que estejam dentro de uma linha ou em uma célula de tabela.
Ops! então se eu declarar para o div#fracasso acima display:table-cell; vai funcionar, pois o DIV terá um comportamento de célula de tabela certo? Sei lá! Vamos experimentar e ver no que dá.

CSS:

div#seila {
 width: 200px;
 height: 150px;
 border: 1px solid #c30;
 background: #ffe;
 vertical-align: middle;
 display: table-cell;
 }

HTML:

<div id="seila">
Texto no meio da DIV
</div> 

Viva! funcionou (o texto ‘foi’ para o meio) conforme mostrado a seguir:

Texto no meio da DIV

Putz! o IE outra vez! Funcionou para quem tem FireFox, Mozilla, Opera, Netscape e navegadores complacentes com as standards. Se você está com o IE6 ou mais antigo o texto ficou lá em cima. Alguém com a versão beta do IE7 aí? Se sim, pergunto: Funcionou?

Atualização em 19/12/2012: Esse código de centralização não funciona no IE7, mas funciona no IE8+. Se você deseja servir o IE7 terá que usar marcação adicional e regras CSS específicas, como mostrado a seguir:

CSS:

#container {
 width: 200px; 
 height: 150px; 
 border: 1px solid #c30;
 background: #ffe;
 position: relative;
 display:table; 
 }
#container p {
 *position: absolute; 
 top: 50%; 
 display: table-cell; 
 vertical-align: middle;
 }
#container span {
 display:block; 
 *position: relative; 
 top: -50%;
 }

HTML:

<div id="container">

Texto no meio da DIV

</div>

Oba! Agora funciona no IE7

Texto no meio da DIV

A propriedade finalmente funcionando

Vamos alinhar textos verticalmente que estejam dentro de uma linha (em uma célula de tabela fica por conta do leitor praticar), como diz a norma.

Tomaremos como base para os exemplos o seguinte texto:

Texto com uma palavra diferente dentro dele

Onde iremos controlar o alinhamento vertical de: palavra diferente dentro do texto

Exemplo 1 – Definindo um valor positivo de 30 pixel

CSS:

span.diferente {
vertical-align: 30px;
}

HTML:

<p>
Texto com uma 
<span class="diferente">
palavra diferente<span> 
dentro dele
</p>

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 2 – Definindo um valor negativo de 30 pixel
Igual ao anterior com -30px

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 3 – Definindo um valor em percentagem, igual a 40%
A percentagem refere-se ao valor de line-height do elemento. Se line-height não for definido vale o valor default para cada elemento.

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 4 – Definindo o valor super

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 5 – Definindo o valor sub

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 6 – Definindo o valor middle

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 7 – Definindo o valor text-top
O alinhamento dos textos é pela linha mais alta dos textos. Mudei o tamanho de fonte para destacar visualmente o alinhamento.

Resultado:

Texto com uma palavra diferente dentro dele

Exemplo 8 – Definindo o valor text-bottom
O alinhamento dos textos é pela linha mais baixa dos textos. Mudei o tamanho de fonte para destacar visualmente o alinhamento.

Resultado:

Texto com uma palavra diferente dentro dele

Imagens e tabelas

Faça suas experiências com imagens e com tabelas.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

Esta matéria foi publicada em: 2006-07-17 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/07/17/propriedade-vertical-align/trackback no seu site.

87 comentários na matéria: “A propriedade CSS vertical-align”

  1. Pedro ManoelNo Gravatar disse:

    Muito Bom. Ajudou bastante. Obrigado!

  2. Marcelo AgimóvelNo Gravatar disse:

    O Internet Explorer só serve para uma coisa: atrasar o avanço da internet.
    Eu voto por todos os desenvolvedores simplesmente barrarem este navegador, informando que deve entrar com qualquer outro navegador exceto aquele.

    Sim é chato…sim nem sempre poderemos fazer isto, mas nos nossos sistemas (todos eles) nós barramos o IE.

    Chegou a hora de dar um basta no IE, sempre que possível.

  3. MaujorNo Gravatar disse:

    @Luiz Carlos
    Muito obrigado pelo seu generoso depoimento.
    Votos de sucesso.

  4. Luiz Carlos - RJNo Gravatar disse:

    Precisei disto agora em 2016, e usei, pois cai aqui também como citou um colega em 2007.
    Também consegui resolver o meu problema e como as informações oriundas do Maujor são precisas e claras.
    Vejam que esta dúvida está sendo resolvida lá se vão 10 anos.
    Tive a curiosidade de ver os inúmeros comentários e um especial me chamou a atenção devido a realidade que o colega Anderson colocou mais ou menos assim em 2007 (Lá se vão 9 anos).:
    “…cerca de 70% das minhas dúvidas com css caem sempre aqui no Maujor…”
    É simples e fácil de entender. Competência para ensinar.
    Como não tenho muitos anos de experiência na área Web, comecei em 2012, o caminho mais simples que encontrei foi as consultas no google e depois que conheci um livro do Maujor, fui comprando conforme as necessidades surgiam e creio que na minha estante faltem apenas 2 que logo comprarei para completar.
    Por isto quero dizer publicamente: Muito obrigado Maujor por dividir com todos nos o seu conhecimento com a melhor qualidade. Parabéns!

  5. caioNo Gravatar disse:

    Obrigado cara

    ajudou mto! 🙂

  6. DanielNo Gravatar disse:

    O problema é quando tem quebra de linha né.

  7. MarcosNo Gravatar disse:

    Fiz desta forma e tentei com mais várias formas alternando as possibilidades com e sem *, e no Internet explorer, sempre dá algum problema. No meu site, é uma cadeia de DIV, uma dentro da outra, todas formando a estrutura, até que chega na DIV que é colocado o conteúdo (dinâmico, o ASP manipula o texto). O DIV do conteúdo, é text-align:justify;overflow:auto;
    O mais comum é tentar deste jeito do tutorial, mas assim que eu defino algo como “position:relative;”, o navegador (apenas o IE) fica com o conteudo no lugar certo, mas assim que meche a scroll, ele mantém preso o DIV relative, e o conteudo passa por trás do div.

    Como não achei solução para o IE, coloquei uma table com id e configurei ela no css para ficar sem borda, margem e padding nas camadas table, tr, td. e no html usei o valign=”bottom” dentro da celula td. (pois meu objetivo é colocar lá em baixo. )
    Se achar uma solução que movimente dentro do scroll de dentro, favor mandar o exemplo, pois ainda não achei.

  8. Emanuel A. LeiteNo Gravatar disse:

    O chato mesmo é que se utilizar display: table-cell e estiver utilizando um height em porcentagem não funciona. 🙁

  9. Curso PHPNo Gravatar disse:

    Muito bom mesmo este artigo e muito útil esta dica. Parabéns!

  10. Gabriel LinsNo Gravatar disse:

    Vlw! Fazia tempo que não conseguia!
    Armou ;D

  11. EderNo Gravatar disse:

    Mais uma dica fantastica para quem estava batendo a cabeça e de repente ta aqui a resposta
    obrigado

  12. DavidNo Gravatar disse:

    Você é o cara majour!!
    Obrigado.

    DTA

  13. Consultoria SEONo Gravatar disse:

    Ótima dica.

  14. João PedroNo Gravatar disse:

    como aplicar isso em post do blogger. ?

  15. OldemarNo Gravatar disse:

    Objetividade e precisão,
    muito obrigado!

  16. EricNo Gravatar disse:

    Maujor é o melhor, eu estava quebrando a cabeça exatamente com esta propriedade ehehe.

  17. lolNo Gravatar disse:

    boa, agora poe uma segunda linha pra ver o q q acontece

  18. Jonathan LoubackNo Gravatar disse:

    Cara, muito útil essa dica! Parabéns por compartilhar seu conhecimento!!

  19. Rafael CalçadaNo Gravatar disse:

    Excelente! Sou blogueiro e me aventuro em HTML e CSS. Seu site ajudou muito!

  20. Adriano ResendeNo Gravatar disse:

    Boa Maujor!
    Excelente artigo, o seu blog é um verdadeiro ‘arredá’ os iniciantes para outro nível.
    Parabéns!
    Abraços!

  21. PlinioNo Gravatar disse:

    Grande Maujor!
    Seu site e blog sempre me salvam quando me deparo com uma propriedade ainda desconhecida por mim!
    Abraço

  22. Bruno HenriqueNo Gravatar disse:

    Show de bola cara Rs* quebrei a cabeça aqui usando só o
    Vertical-Align:Botoom; Agora sim vlw abç…

  23. Ricardo MonteiroNo Gravatar disse:

    Gente, eu precisei criar linhas verticais em um website então dei um jeitinho brasileiro, criei divs com larguras de 2 px e altura de acordo com o que eu precisava, e posicionei no luga adequado com css…rsrsrs… funcionou!

  24. jrNo Gravatar disse:

    =0)
    Muito obrigado, entendi, eu sou o usuário frustado do primeiro exemplo rs. Muito bom! Obrigado. Abração.

  25. Pablo RibeiroNo Gravatar disse:

    Obrigado, maujor, vc e o cara mesmo (:

  26. BrayanNo Gravatar disse:

    Valeu Maujor, muito esclarecedor.

  27. yuriNo Gravatar disse:

    não é margin é padding:6px;

  28. angelicaNo Gravatar disse:

    ei por favor vc poderia me ajudar, so iniciante na area e estou desenvolvendo uma pagina e gostaria de ajuda pq minha pagina nao tem uma margen de texto ja coloquei margin:6 px ,mais ele leva e a div e nao o texto ,ficaria grata se alguem tivesse resposta

  29. MarneiMaxNo Gravatar disse:

    Yuri, crie uma div e dê o float desejado. Coloque a div que esta “centralizando” dentro dessa div que contem o float 😉

  30. yuriNo Gravatar disse:

    Conseguir fazer tranquilo, porém a DIV onde esta “vertical-align: middle; display: table-cell;” tem tb “float:right;” que serve para alinhar a div a direita e não funciona o alinhamento na vertical, só qdo eu tiro o float. E agora, como eu alinho a div a direita sem o float? alguem ja teve esse problema? Se alguem puder me ajudar agradeço. Abraço!

    Segue meu codigo abaixo:

    .div-img{
    width: 120px;
    height: 110px;
    border: 1px solid #ccc;
    background: #fff;
    padding: 3px;
    float: right;
    margin-bottom: 5px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    }

  31. FelipeNo Gravatar disse:

    O alinhamento do texto no div, também não funcionou no IE7 “/ complicado hein…Mas vlw…line height resolver por hora..
    hehe

    abraços,

  32. Lucas ViegasNo Gravatar disse:

    Sou iniciante em css e já estava desistindo de alinhar o texto na vertical. Não sabia mais o que fazer. Excelente post, muito simples e muito bem explicado, parabéns!! O site já está no meu favoritos.

  33. robsonNo Gravatar disse:

    esse site é dez me ajuda muito as vezes
    desentupidora

  34. DanielNo Gravatar disse:

    Finalmente depois de somente ler este belo blog, vou dar a minha pequena contribuição, para o line-height funcionar no IE basta você colocar a seguinte declaração:
    html#suadiv{
    height: 85px;
    }
    Utilizando o exemplo acima:
    html#seila{
    height: 150px;
    }

  35. HenriqueNo Gravatar disse:

    Obrigado Maujor, realmente ajudou, pois eu estava achando que ia se comportar como tabela, não conhecia o atributo display.

    No IE8 funcionou bem.

  36. Mario AndradeNo Gravatar disse:

    O IE7 não suporta os valores display:table nem display:table-cell.

    Estou com o mesmo problema, quero ajustar texto com mais de 2 linhas ao fundo de um div e não está a funcionar correctamente no IE7

  37. EderNo Gravatar disse:

    Como sempre, me ajudou muito!

  38. KarynaNo Gravatar disse:

    Não funcionou no IE
    vertical-align: middle;
    display: table-cell;
    Alguém sabe pq???

  39. evertonNo Gravatar disse:

    Não funcionou no ie6, ie7, ie8 o código

    CSS:
    div#seila {
    width: 200px;
    height: 150px;
    border: 1px solid #c30;
    background: #ffe;
    vertical-align: middle;
    display: table-cell;
    }

    HTML:

    Texto no meio da DIV

    tem alguma idéia como fazer para funcionar nesses navgadores?

    até mais

  40. Diego FáveroNo Gravatar disse:

    Maujor, minha DIV tem tem a propriedade float:left. Neste caso não dá certo utilizar o v-align. [2]

    Tenho seu livro que é sensacional! Foi meu primeiro passo ao CSS, que utilizo todos os dias. Parabéns e obrigado por difundir o seu conhecimento.

  41. Alberto RobertoNo Gravatar disse:

    Não funciona nada em navegador nenhum!

  42. Alinhamento Vertical em CSS | HajaLuz disse:

    […] todos que passaram por isso um dia devem ao nosso grande mestre Maujor, o agradecimento por esse post divino. Além dele aprendi muito com outra postagem redentora é a do Bruno Torres sobre […]

  43. Marcel SampaioNo Gravatar disse:

    Maujor, hoje entrei em seu blog, com objetivo de verificar se realmente haveria algumas dicas novas, e sem nenhum espando realmente exite, consegui elaborar meu primeiro site como iniciante e posso dizer com sinceridade, aprendi muito com seus ensinamentos, está de parabéns, meu site não é grande coisa, porém com suas dicas aprendi e desenvolvi algo.

    Grato,

    Marcel Sampaio

  44. NatanaelNo Gravatar disse:

    Tava usando uma ‘ganbiarra’, seu texto me ajudou muito moujor, sem contar que ler um posto ou artigo seu eu sei que posso usar sem problemas. Você é fera, PARABÉNS

  45. ChristianNo Gravatar disse:

    Rapaz… sua dica me ajudou a alinhar meu texto verticalmente.
    Detalhe é que quando busquei no Google sobre como alinhar um texto verticalmente com css, adivinhe? O seu era o último resultado da primeira página, antes do seu link (que eu já conhecia) existiam outros que falavam pra fazer várias e várias gambiarras, totalmente desnecessárias se comparada à sua solução. Brigadão!

  46. MarceloNo Gravatar disse:

    Maujor, minha DIV tem tem a propriedade float:left. Neste caso não dá certo utilizar o v-align.

    Um abraço

  47. jonasNo Gravatar disse:

    o “vertical-align: middle” no div é em relação ao próprio div, e não ao conteúdo dentro dele.
    por exemplo, centralizando uma div na pagina, independente da resolução (teste alterando a resolução do monitor):

    teste

    um abç
    jon

  48. André RodriguesNo Gravatar disse:

    Interessante.

    Obrigado por compartilhar as informações.

    São de fundamental importância para desenvolver um bom trabalho.

    Vou retomar agora mesmo.

    André Rodrigues
    http://www.vendagora.com.br

  49. KeyslavNo Gravatar disse:

    Se eu coloco “position: absolute;” não funciona mais!
    alguma ideia de como contornar isso??

    Obrigado

  50. GuilhermeNo Gravatar disse:

    Vlw… foi bem utilizado!!

  51. Orlando LeiteNo Gravatar disse:

    Muito bom a explicação. Vou até procurar saber mais este sobre este display: table-cell.

    Mas é uma pena que não funcione na porcaria do ie6, vou ter que esperar mais um pouco para usar ainda.

  52. urgenteNo Gravatar disse:

    Boas
    eu queria centrar duas imagens diferentes na mesma div ?

  53. DanielNo Gravatar disse:

    Muito fera sem cometarios,você realmente e definitivamente tem vocação
    para ensinar e ajudar.
    Obrigado.de daniel

  54. Nagüeva » Tag br pra quê? disse:

    […] Alinhar o texto verticalmente? Simples, especifique um padding para o container desse texto ou em casos mais específicos use o vertical-align. […]

  55. vitorNo Gravatar disse:

    O line-height não uso muito, devido se você usar mais de uma linha, ele dá espaçamento em todas, eu também uso o padding-top:

  56. danielNo Gravatar disse:

    no meu css coloquei o display: block ficou ótimo mas tenho que colocar o texto no roda-pe , alguem pode me ajudar?

  57. EduardoNo Gravatar disse:

    Colocando os comandos na ordem seguinte, funcionam corretamente
    font: 10px Verdana;
    height: 29px;
    line-height: 29px;

    Porém, se inverter no exemplo abaixo, já não dá certo…
    height: 29px;
    line-height: 29px;
    font: 10px Verdana;

    Perdi algum tempo até ver isso… hehehe

  58. GabrielNo Gravatar disse:

    Olá Maujor…

    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!

  59. Nagueva » Blog Archive » <br /> pra quê? disse:

    […] Alinhar o texto verticalmente? Simples, especifique um padding para o container desse texto ou em casos mais específicos use o vertical-align. […]

  60. Otávio BritoNo Gravatar disse:

    Muito bom! eu tava precisando desse alinhamento, mais não sabia como fazer! Gostei muito simples e eficiente! abraços…

  61. Aderbal NunesNo Gravatar disse:

    Cara era tudo o que eu precsava! simples heuheuheu
    valeu

  62. AntonioNo Gravatar disse:

    Parabéns. Sou muito grato ao Maujor. Como apenas um curioso em desenvolvimento web, tenho sanado minhas principais dificuldades aqui.

  63. FabólasNo Gravatar disse:

    Agradeço mais uma vez.
    Seus tutoriais tem me ajudado a desenvolver melhor os sites.

  64. Anderson dos SantosNo Gravatar disse:

    Engraçado é que 70% das pesquisas que faço com duvidas sobre CSS, as buscas sempre caem aqui… ou no maujor.com XD

    Valew tava precisando disso XD

  65. Walter CRuzNo Gravatar disse:

    Tava brigando com ela agorinha mesmo! Abraço

  66. Fernando André SilvaNo Gravatar disse:

    Esclareceu todas as dúvidas! Simplesmente perfeito!

  67. Juliano VasconcellosNo Gravatar disse:

    Estou começando a fazer meus sites com Div em vez de tabela… mas demorou tanto rpa resolver esse alinhamento que dentro de uma div coloque uma table hehehe

    era so para um título. agora resolveu… mas sei que nao é o correto em termos de padrões

  68. Bruno CoutoNo Gravatar disse:

    Oi,
    O vertical-align: middle; display: table-cell; funcionou mas o padding nas minhas divs (menu com float: left) ficou todo mal, por causa do display_ table-cell… no meu caso n posso usar o line-height, porque tenho uma div com height: 30px; em q um menu e so uma palavra mas noutros sao 2 e ele faz quebra de linha…logo para centrar um os outros iriam ficar mal… alguma solução?
    Obrigado!

  69. lucainoNo Gravatar disse:

    Olá, estou com uma dúvida.. estou tentando por um div 100% de altura na tela.. como faço isso.. mas que funcione.. no mozilla tbm… eu ja consegui fazer no ie.. mas no mozilla da um pane danado..

    preciso colocar um flash alinhado center vertial e horizontal.. dentro desse div..

    um exemplo do bug no mozilla é esse site
    http://www.fortiar.com.br
    no ie funciona no mozila não .. aparece metade do site no topo ainda

    espero que possa me ajudar vlw

  70. Bruno KenjNo Gravatar disse:

    Majur,

    no IE 7.0 beta 3, também acontece… mesmo setando o display como table-cell, o texto fica lá em cima. feio. Por que não entram nas normas de acessibilidade?

    aí vai a dica então: http://WWW.IE7.COM

    : )

    abraços

  71. Tiago CelestinoNo Gravatar disse:

    Putz… uso muito o vertical-align em celulas das tabelas. Agora que li aqui as melhores formas de usar ele, estarei melhorando com esse atributo.

  72. ArtiNo Gravatar disse:

    Ora ai estão boas soluções mas o line-height apesar de resolver muita coisa complica noutras, a ver se no CSS 3 resolvem essa problema.

    Mas sem dúvida optimo artigo e explicação.
    Nada que não estejamos habituados, ; P

  73. EdgarNo Gravatar disse:

    Adorei saber que a propriedade funciona =)

    Pra mim ela era inútil, e eu tinha que fazer umas “gambiarras” pro texto ficar no meio.

    Obrigado pela nova dica.

  74. Pedro RogérioNo Gravatar disse:

    Estive vendo um tutorial sobre essa propriedade em um outro site, com o seu reparei que o de lá está imcompleto. Obrigado pela dica. Abraços!!!

  75. Edward KishiNo Gravatar disse:

    Muito bom mesmo!!!

    Quase sempre abandonava o CSS quando precisava do do alinhamento vertical. Não conhecia a opção do “line-height:xxx”, e espero que o IE7 aceite o comando.
    parabéns.

  76. Osny Santos NettoNo Gravatar disse:

    Simplismente show de bola.
    Já me estressei algumas vezes com essa propriedade, eu tentava driblar com o: padding-top.
    Abraços.

  77. Igor MendonçaNo Gravatar disse:

    No IE7 também não funcionou. 🙁

  78. Carlos EduardoNo Gravatar disse:

    Muito bom… Confesso que até agora não sabia exatamente como se aplicaria essa propriedade.

    Obrigado por mais uma contribuição =)

  79. rflky3No Gravatar disse:

    Maravilhoso.. muito bom!!
    baita post, explicadinho e tudo mais.. vlw Maujor…
    e no IEca não tem solução para isso? usando css?
    usando table.. era soh colocar um valign=”middle” e boa.. mas com css n achei jeito ainda.. teria alguma idéia de como fazer?
    []’s

  80. Areta do BemNo Gravatar disse:

    Poxa, a verdade é que agente esbarra nessa propriedade mesmo!
    Experiência própria de uma inciante! rs
    Muito obrigada!
    Agora fica bem mais claro para nós!

    Boa semana,

    Areta do Bem

  81. JoaresNo Gravatar disse:

    Valeu Maujor… tirou minha dúvida do pq q num funcionava… hehehe… faltava o display!

  82. Estevão LucasNo Gravatar disse:

    Estava justamente com esse problema do vertical-align!!
    tah ai a importancia de um bom feed!!
    vlw
    parabens

  83. Rodrigo AramburuNo Gravatar disse:

    Valeu, ontem tava tentando fazer isso e não conseguia.

  84. André M.No Gravatar disse:

    Então quer dizer que não há modo de fazer o vertical-align: middle funcionar no IE? Neste caso, o melhor mesmo é usar line-height?

  85. Alex SaueressigNo Gravatar disse:

    Muito esclarecedor o tutorial
    Convenhamos, o alinhamento vertical (em middle) não é a coisa mais simples em CSS à primeira vista. Alguém sabe se o CSS 3 vai trazer alguma melhoria neste sentido?

  86. MicoxNo Gravatar disse:

    Graaande maujor.

    Eu fui um dos que abandonei esta propriedade quando era iniciante. Graças a seus ensinamentos irei retomá-la agora. hehe

  87. Lucas AlvesNo Gravatar disse:

    Boa Maujor, show de bola.
    Gostei bastante do artigo.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo