A propriedade CSS vertical-align
Publicado em: 2006-07-17 — 565.709 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:
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:
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:
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.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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 https://www.maujor.com/blog/2006/07/17/propriedade-vertical-align/trackback no seu site.
Muito Bom. Ajudou bastante. Obrigado!
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.
@Luiz Carlos
Muito obrigado pelo seu generoso depoimento.
Votos de sucesso.
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!
Obrigado cara
ajudou mto! 🙂
O problema é quando tem quebra de linha né.
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.
O chato mesmo é que se utilizar display: table-cell e estiver utilizando um height em porcentagem não funciona. 🙁
Muito bom mesmo este artigo e muito útil esta dica. Parabéns!
Vlw! Fazia tempo que não conseguia!
Armou ;D
Mais uma dica fantastica para quem estava batendo a cabeça e de repente ta aqui a resposta
obrigado
Você é o cara majour!!
Obrigado.
DTA
Ótima dica.
como aplicar isso em post do blogger. ?
Objetividade e precisão,
muito obrigado!
Maujor é o melhor, eu estava quebrando a cabeça exatamente com esta propriedade ehehe.
boa, agora poe uma segunda linha pra ver o q q acontece
Cara, muito útil essa dica! Parabéns por compartilhar seu conhecimento!!
Excelente! Sou blogueiro e me aventuro em HTML e CSS. Seu site ajudou muito!
Boa Maujor!
Excelente artigo, o seu blog é um verdadeiro ‘arredá’ os iniciantes para outro nível.
Parabéns!
Abraços!
Grande Maujor!
Seu site e blog sempre me salvam quando me deparo com uma propriedade ainda desconhecida por mim!
Abraço
Show de bola cara Rs* quebrei a cabeça aqui usando só o
Vertical-Align:Botoom; Agora sim vlw abç…
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!
=0)
Muito obrigado, entendi, eu sou o usuário frustado do primeiro exemplo rs. Muito bom! Obrigado. Abração.
Obrigado, maujor, vc e o cara mesmo (:
Valeu Maujor, muito esclarecedor.
não é margin é padding:6px;
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
Yuri, crie uma div e dê o float desejado. Coloque a div que esta “centralizando” dentro dessa div que contem o float 😉
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;
}
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,
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.
esse site é dez me ajuda muito as vezes
desentupidora
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;
}
Obrigado Maujor, realmente ajudou, pois eu estava achando que ia se comportar como tabela, não conhecia o atributo display.
No IE8 funcionou bem.
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
Como sempre, me ajudou muito!
Não funcionou no IE
vertical-align: middle;
display: table-cell;
Alguém sabe pq???
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
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.
Não funciona nada em navegador nenhum!
[…] 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 […]
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
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
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!
Maujor, minha DIV tem tem a propriedade float:left. Neste caso não dá certo utilizar o v-align.
Um abraço
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
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
Se eu coloco “position: absolute;” não funciona mais!
alguma ideia de como contornar isso??
Obrigado
Vlw… foi bem utilizado!!
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.
Boas
eu queria centrar duas imagens diferentes na mesma div ?
Muito fera sem cometarios,você realmente e definitivamente tem vocação
para ensinar e ajudar.
Obrigado.de daniel
[…] Alinhar o texto verticalmente? Simples, especifique um padding para o container desse texto ou em casos mais específicos use o vertical-align. […]
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:
no meu css coloquei o display: block ficou ótimo mas tenho que colocar o texto no roda-pe , alguem pode me ajudar?
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
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!
[…] Alinhar o texto verticalmente? Simples, especifique um padding para o container desse texto ou em casos mais específicos use o vertical-align. […]
Muito bom! eu tava precisando desse alinhamento, mais não sabia como fazer! Gostei muito simples e eficiente! abraços…
Cara era tudo o que eu precsava! simples heuheuheu
valeu
Parabéns. Sou muito grato ao Maujor. Como apenas um curioso em desenvolvimento web, tenho sanado minhas principais dificuldades aqui.
Agradeço mais uma vez.
Seus tutoriais tem me ajudado a desenvolver melhor os sites.
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
Tava brigando com ela agorinha mesmo! Abraço
Esclareceu todas as dúvidas! Simplesmente perfeito!
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
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!
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
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
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.
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
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.
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!!!
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.
Simplismente show de bola.
Já me estressei algumas vezes com essa propriedade, eu tentava driblar com o:
padding-top.Abraços.
No IE7 também não funcionou. 🙁
Muito bom… Confesso que até agora não sabia exatamente como se aplicaria essa propriedade.
Obrigado por mais uma contribuição =)
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
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
Valeu Maujor… tirou minha dúvida do pq q num funcionava… hehehe… faltava o display!
Estava justamente com esse problema do vertical-align!!
tah ai a importancia de um bom feed!!
vlw
parabens
Valeu, ontem tava tentando fazer isso e não conseguia.
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?
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?
Graaande maujor.
Eu fui um dos que abandonei esta propriedade quando era iniciante. Graças a seus ensinamentos irei retomá-la agora. hehe
Boa Maujor, show de bola.
Gostei bastante do artigo.