A propriedade CSS vertical-align
Publicado em: 2006-07-17 — 34,744 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 uma DIV com esta 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:
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 a div#fracasso acima display:table-cell; vai funcionar, pois a 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?
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.
(2 votos, média: 5 / 5)
Loading ...----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Esta matéria foi publicada em: 2006-07-17 (Monday). 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.
Boa Maujor, show de bola.
Gostei bastante do artigo.
Graaande maujor.
Eu fui um dos que abandonei esta propriedade quando era iniciante. Graças a seus ensinamentos irei retomá-la agora. hehe
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?
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?
Valeu, ontem tava tentando fazer isso e não conseguia.
Estava justamente com esse problema do vertical-align!!
tah ai a importancia de um bom feed!!
vlw
parabens
Valeu Maujor… tirou minha dúvida do pq q num funcionava… hehehe… faltava o display!
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
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
Muito bom… Confesso que até agora não sabia exatamente como se aplicaria essa propriedade.
Obrigado por mais uma contribuição =)
No IE7 também não funcionou.
Simplismente show de bola.
Já me estressei algumas vezes com essa propriedade, eu tentava driblar com o:
padding-top.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.
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!!!
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.
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
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.
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
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
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!
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
Esclareceu todas as dúvidas! Simplesmente perfeito!
Tava brigando com ela agorinha mesmo! Abraço
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
Agradeço mais uma vez.
Seus tutoriais tem me ajudado a desenvolver melhor os sites.
Parabéns. Sou muito grato ao Maujor. Como apenas um curioso em desenvolvimento web, tenho sanado minhas principais dificuldades aqui.
Cara era tudo o que eu precsava! simples heuheuheu
valeu
Muito bom! eu tava precisando desse alinhamento, mais não sabia como fazer! Gostei muito simples e eficiente! abraços…
[…] Alinhar o texto verticalmente? Simples, especifique um padding para o container desse texto ou em casos mais específicos use o vertical-align. […]
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!
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
no meu css coloquei o display: block ficou ótimo mas tenho que colocar o texto no roda-pe , alguem pode me ajudar?
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:
[…] Alinhar o texto verticalmente? Simples, especifique um padding para o container desse texto ou em casos mais específicos use o vertical-align. […]
Muito fera sem cometarios,você realmente e definitivamente tem vocação
para ensinar e ajudar.
Obrigado.de daniel
Boas
eu queria centrar duas imagens diferentes na mesma div ?
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.
Vlw… foi bem utilizado!!
Se eu coloco “position: absolute;” não funciona mais!
alguma ideia de como contornar isso??
Obrigado
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