Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera, já rodei vários fórums e tutoriais sobre Tableless e uma das dúvidas mais freqüentes é sobre alinhamento vertical nas Divs. O fato é que de todas as respostas que li, nenhuma resolve perfeitamente o problema de precisar alinhar o conteúdo de uma Div pelo meio ou pela base.Afinal, a definição "vertical-align: middle;" funciona?! Como?Uma das soluções que vi por aí é usar uma posição "top: 50%", mas usando desta maneira, o topo do conteúdo fica na posição "50%" da altura da Div. Dá pra fazer uma gambi e usar uma posição quebrada (ex.: "34%") onde seu conteúdo fique certinho... maaaaaaaaaaasssss... E SE eu tiver dados variáveis dentro dessa Div, onde uma hora o conteúdo pode ter uma altura e outra hora pode ter outra altura?!Pelo que li por aí, ninguém conseguiu dar uma explicação que funcione perfeitamente.Para validar um site pelo W3C, consegui fazer uma gambi que pode funcionar corretamente:- usei uma tabela sem definição de altura- no CSS padronizei "table { height: 100%; }" (deixando todas as tabelas com 100% de altura - se encaixando às alturas das Divs onde estiverem posicionadas)- Finalmente usei a propriedade "valign="middle" para a célula onde eu precisava alinhar o conteúdo.Resultado:- Validei o xhtml 1.0 e o css pelo W3C.- O site funcionou perfeitamente no IE, Firefox, Netscape, IE para MAC, Safari e Opera.O que fiz está certo?! Mesmo funcionando, queria fazer um site SEM TABELAS!!!Alguém sabe desvendar esse mito do alinhamento vertical para Divs???Se no CSS existe a propriedade "vertical-align", deve existir uma forma pra ela funcionar.Se alguém puder me ajudar ficarei muito grato! ;) Valeeeeu!Abraços,Cleber
Falae, beleza?!
Então cara... não rolou dessa maneira também.
Veja se errei em alguma coisa:
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Valeu pela força!
Abraço!
Cleber
agora q eu descobri que esse code nao funciona no Ieca ! segue o um link q peguei na net
http://www.456bereastreet.com/lab/equal_height/
http://www.456bereastreet.com/lab/equal_height_ii/
flw
Caraio... pelo que li, não há nenhuma alternativa pro IE?!Que saco né?!Bom, então a minha gambi de usar uma tabela com altura e alinhamento definidos no CSS é razoavelmente válida ;) Pelo menos valida pelo W3C e não suja taaaaaaanto o código, além de funcionar em qualquer navegador.Se alguém souber de uma outra forma, manda ae! :) Valeu...Abraços,Cleber
assim vcs tao trocando seis por meia dúzia, nao?hehehehese for pra usar desse jeito, eu fico com tabelas, ueh.. qual eh a grande sacada de usar divs?
A grande diferença é que uma div bem aplicada tem muito menos texto no código que uma tabela, deixando o código mais leve, mais acessível e mais limpo. Outra grande vantagem é na hora de alterar o layout. É muito mais fácil arrumar uma Div no CSS do que uma tabela no CSS.Além do que uma tabela não consegue ter 3 pix de altura por ex., se você não usar uma imagem spacer.gif. Mais sujera no código e no site em geral. Layoutar com Divs é BEEEEEEEEEM mais simples.Só que a m***** toda é que não rola alinhamento vertical pras divs.
Tem q usar com cautela a tabela já que ela exibe seu conteudo somente depois de inteiramente carregada. Se falei m**** me corrijam...
>
Propriedade 'vertical-align'
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Valor padrão: baseline
Aplicável a: elementos internos
Propriedade herdada: não
Valores percentuais: referidos à 'line-height' do próprio elemento
Esta propriedade age sobre a posição vertical do elemento. Um conjunto de palavras chaves diz respeito às atribuições do elemento pai:
'baseline'
alinha as partes inferiores dos elementos pai e filho
'middle'
alinha os pontos médios verticais dos elementos pai e filho
'sub'
aplica o efeito de subscrito ao elemento
'super'
aplica o efeito de sobrescrito ao elemento
'text-top'
alinha o topo do elemento com o topo das fontes usadas no elemento pai
'text-bottom'
alinha a parte inferior de um elemento com a parte inferior das fontes usadas no elemento pai
Um outro conjunto de valores são relativos à formatação da linha que contem o elemento:
'top'
alinha o topo do elemento com o elemento mais alto que a linha contiver
'bottom
alinha a parte inferior do elemento com o elemento mais baixo contido na linha
O emprego dos valores 'top' e 'bottom' pode levar a situações insolúveis, nas quais surge um loop entre as interdependências dos elementos.
Os valores percentuais são referidos em relação ao valor da propriedade 'line-height' do próprio elemento (não do elemento pai). Eles colocam a parte inferior do elemento acima da parte inferior do elemento pai, usando o valor especificado para determinar o quanto de elevação aplicar. São aceitos valores negativos. Ou seja, um valor '-100%' irá descer a parte inferior do elemento até encontrar a parte correspondente do próximo elemento. Esta propriedade permite o controle preciso da posição vertical dos elementos (tais como imagens de letras usadas no lugar das próprias letras).
Ou seja... aqui deu certotanto no IECA como no firefox
em vez de definir a altura da minha div pela propriedade height, utilzei o line-heigh e defini o vertical - align como -100%
...
Caros colegas, acho que dessa forma funciona em qualquer navegador.Em primeiro lugar é preciso definir o tamanho do objeto que pretendemos centralizar.Aqui o obejeto será uma div de 100px por 30px.<style type="text/css">...
Kra e se eu tiver varios div com o mesmo style. O que vai dar? Simplesmente vão ficar todos um em cima do outro por ter a mesma posição absoluta. Com certeza ninguém que isso. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif
Olá senhores!Acho muito legal o esforço de vcs em resolver este problema que nos impuseram. Estou adotando a formatação com divs e ela realmente ajuda na organização do código. Mas eu acho sem nenhum cabimento, não haver uma solução digna para este tipo de problema. Isto na minha opinião é uma falha terrível da linguagem. É intuitivo, se você tem um objeto que pode ter conteúdo dentro dele você automaticamente pensa nas possibilidades de alinhamento de outros objetos dentro do mesmo. Hoje muito se fala em Webtandards e em tableless e os orgãos responsáveis são incapazes de resolver esta falha rídicula. Conclusão perdemos no precioso tempo quebrando a cabeça com um problema que não deveria nem existir.Isto é um desabafo com os colegas de um cara que chutou o balde hoje e criou uma velha tabela pra fazer um menu de site.
Não é culpa da linguagem e sim do IE que não segue os padrões...... Nos demais navegadores é possivel fazer...
A culpa é da microsoft, você não está totalmente errado usando uma tabela pra resolver um problema com urgência, hoje temos prazos e às vezes temos que apelar mesmo...[]'s
zerenner e ANL, eu concordo com voces... não é possivel sem usar tabelas e sem criar miraculosas solucoes... que tambem até hoje nao funcionaram.
alguem ai é capaz de fazer um codigo melhor com div? nao preciso de mais nada para que o texto fique centralizado na tabela...
<div style='width: 170px; height: 170px; position: absolute; top: 50; left: 50; border: 1px solid black; text-align: center;'> Teste<br>segunda linha</div><table style='width: 170px; height: 170px; position: absolute; top: 200; left: 200; border: 1px solid black; text-align: center;'><tr><td> Teste<br>segunda linha</td></tr></table>
vertical-align: middle;
vertical-align: top; ou vertical-align: text-top;
vertical-align: bottom; ou vertical-align: text-bottom;
funcionam apenas em TABELAS e nos principais navegadores do windows que eu testei funcionaram 100% correto
<style>table.pos { height:200px;}table.pos td{ vertical-align:middle; border:1px #0f0f0f solid;}</style><table class="pos"> <tr> <td>BLA BLA BLA</td> </tr></table>siga esse exemplo que você não tera menos problemas
ou entaum faça o seguinte
Caso você queira mesmo DIVs coloque um BR(só use-o se ele não vier atrapalhar logico hehe)
siga o exemplo:
<style>.pos { border:1px #0f0f0f solid; height:200px; width:200px;}.pos br{ line-height:80px;}</style><div class="pos"><br />texto</div>
silverfox, eu nao quero mudar nada na tabela, esse codigo já me garante que qualquer texto que eu coloque e independente do tamanho, ficará sempre centralizado na tabela...eu quero é que os experts em TableLess faça um codigo utilizando os div (já que nao "podemos" usar tabelas) que funcione da mesma maneira... desse jeito que voce colocou nao tenho a mobilidade de mudar o tamanho da tabela ou alterar o texto sem ter que mexer no line-height, que é a pior coisa utilizada para centralizar um texto, coisa de amador.Obrigado e aguardo mais respostas.
FabricioGomes eu estava era explicando onde funciona o VERTICAL-ALIGN
aff
agora se você me achou algo amador você ira encontrar coisa pior valew
presta atenção usar line-height foi uma ideia para centralizar, foi uma gambiarra só isso
em varios lugares há gambiarras para obtermos uma ideia
vou pesquisar e ver se acho algo para centralizar mesmo...
posso não ser o exper mas to tentando ajudar
tomei broncas tenho conciencia
to mudando
mas faz favor calma ae antes de vim soltando os cachorros beleza?
bem achei essa "solucao" http://www.tuliofaria.net/alinhamento-vert...cript-e-jquery/
veja se serve, testei e funcionou muito bem hehehe
ja que essa solucao vem a ser javascript se eu estiver fazendo algo errado ou postando errado vcs me avisem
fazendo o favor q ae eu posto la em javascript beleza?
o JS:
http://code.jquery.com/jquery-latest.pack.js
ele em execução:
<html><head> <title></title> <style> .alinhar{ height: 500px; border: 1px solid black; } </style> <script type="text/javascript" src="[http://jquery.com/src/jquery-latest.pack.js">fui
brincando com CSS akabei fazendo isso
e percebi pq o alinhamento vertical não funciona no IE,
na verdade ele funciona sim mas interpreta de uma maneira estranha
tipo veja esse exemplo
CSS:
<style>#altura{border-left:1px #000000 solid;display:inline;height:200px;}#caixa{border:1px #000000 solid;border-right:none;height:200px;display:inline;vertical-align:middle;}</style>DIVs
<div id="caixa">Meu texto bla bla<img src="foto.jpg" /></div><div id="altura"><!--//Gera alinhamento--></div>testem e verão o efeito Atenção: isso não é uma solução porque contém falhas e nem deve ser usada. É só para ser pensado e ver se é inútil ou se pode ser aproveitado.
Vou fazer uns testes se o pessoal quiser testar e achar alguma ideia pra aproveitar esse codigo
e modifica-lo para que ele possa ser aproveitado
caso não seja aproveitado ou piore as coisas esqueçam isso e procuremos novas ideias http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
bem fazendo gamiarra cheguei a essa solução para evitar que afeta-se objetos externos
porem ele não fica 100% central mas já é alguma coisa
<style>.parente{width:200px;border:1px #000000 solid;}#altura{display:inline;height:900px;/modifique essa altura /}#caixa{height:900px;/modifique essa altura caso for modificar a primeira/display:inline;vertical-align:middle;}</style><div class="parente"><div id="caixa">Meu texto bla blaasdas<img src="foto.jpg" /></div><div id="altura"><!--//Gera alinhamento--></div></div>vou fazer mais umas gambiarras e testes e volto a postar
e tem mais essa "solução"
se alguem encontrar problemas nessa me avisa valew
<style> .parente { border:1px #0f0f0f solid; height: 2800px } .caixa {position: relative; top:40%;} </style> <div class="parente"> <div class="caixa">bla bla bla <br />bla bla bla <br />bla bla bla <br />bla bla bla <br /> </div> </div>
-----------------a partir daqui estou explicando as "falhas" que ocorrem-------------------pra se ter uma ideia melhor veja esse exemplo o alinhamento vertical afeta coisas a volta do
objeto que recebeu esse atributo
<style> IMG{ height:200;vertical-align: middle; }</style><img src="foto.jpg">textofiz uma gambiarra com esse "codigo" porem ocorre o seguinte o texto quebra para baixo da imagemfaçam o teste e vejam
<style>.lateral{ width:0;height:200; vertical-align: middle; }</style><img class="lateral" />texto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto texto textocalma, silverfox... nao te questionei e nem te chamei de amador, so falei do line-height como centralizador é gambiarra de amador, ou seja, não funciona, só isso.
Gostei dos seus códigos, entendo que vai ser preciso uma gambiarra para realizar o alinhamento vertical/horizontal centralizado dentro de um DIV (que acho uma falha dos browsers), mas repare que tantos codigos já postados nesse topico e inclusive os seus e não conseguiram fazer o que fiz com uma tabelinha basica...
o que mais chegou perto do que quero que chegue quem entenda de tableless (que define que em layout não deve ser usado <table>, somente para seu propósito que é "Tabelas") é o seguinte:
<style>.parente { border:1px #0f0f0f solid; height: 200px}.caixa { position: relative; top:40%;}</style><div class="parente"> <div class="caixa"> bla bla bla <br /> bla bla bla <br /> bla bla bla <br /> bla bla bla <br /> </div></div>mas reparem que o texto nao fica centralizado e ainda é dependente do tamanho do texto...
Aguardo mais codigos tentando resolver este "MITO"...
Obrigado, silverfox... amigo!!!, amigo!!!
PS: reparem que aqui mesmo no forum, aparece uma barrinha de "carregando, aguarde" que tambem nao fica centralizada verticalmente, e creio que seja um DIV...
Abraços!
Achei esse na NET somente para IE
aviso: não tire o DOCTYPE(validação):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
muito legal... só que realmente no firefox nao funcionou, será que precisa de alguma configuraçao?
modifiquei até que nao fosse necessário mudar mais nada.
so nao gostei da gambi "edge", acho que por isso nao funcionou no Firefox... ficou no topo e a esquerda.
esse codigo só funcionou no IE
<html><head><style> #edge { height:100%; vertical-align:middle; } #container { text-align:center; width:100%; vertical-align:middle; } div{ border:1px #0f0f0f solid; height:100px; width: 250px; }</style> <body><div><span id="edge"></span> <span id="container">Qualquer texto no div.<br />Segunda linha do texto.</span></div></body> </html>
é mas foi o que eu disse
Achei esse na NET somente para IE
isso acontece é só usar um hack ae acho que tudo da certo ^^
se alguem tiver outras soluções, seria legal...pois ainda prefiro utilizar as tabelas, menos trabalhoso... hehehevaleu, silverfox...
Olá pessoal!
Me cadastrei pq já tive essa dúvida e agora quero dar uma mão pra vocês.
No meu caso foi simples de resolver:
<style type="text/css">.posicionamento { width:100%; height:500px; top:50%; left:50%; margin-left:-350px; margin-top:-250px; position:absolute; }</style>Isso funciona se você tiver como definir a altura do conteúdo. Como vocês devem saber, o CSS não pega por padrão o centro do objeto como referência e sim suas extreminadades, em específico o canto superior esquerdo. Para que o objeto fique centralizado no meio, a propriedade "margin-top" deve ser a metade do tamanho definido na propriedade height.
Por fim:
<div id="conteudo" class="posicionamento">CONTEÚDO EM QUESTÃO</div>Espero ter ajudado.
Abraços!
Pois é, anderson, o que quero provar é que uso "Tableless" é uma situação que nunca vai existir, pois existem coisas que com uma simples tabela conseguimos fazer coisas simples, que um DIV ou SPAN ou qq outra tag nao consegue fazer por causa dos Browsers, entenderam?A duvida do zerrener, e do ANL, era exatamente isso, porque uma coisa simples de ser feita precisa de tanta gambiarra só pra nao usar uma tabela, que muito simplesmente, faz seu papel na questão de layouts.Como o silverfox tentou realizar e quase conseguiu (parabens silverfox), foi que não existe uma forma tão simples como uma tabela de fazer o que queremos com um DIV.E nao é culpa do somente do IE, e sim do Firefox também (nenhuma solução tambem foi atendida pelo Firefox).Abraços e aguardo novas possiveis soluções para este problema.PS: Sei que o MITO desse tópico é o uso do vertical-align, mas creio que o que tento solucionar aqui é o que todos desejam, com o uso do vertical-align.
ve lah fabricio
bom, essa é secreta ein !... vamos lá...
você pode fazer uma DIV se comportar como uma tabela... voila !
mais ou menos assim
<div id="main"> <div id="rows"> <div id="cell"> </div> </div></div>
#main {display: table;}#row {display: table-row;}#cell {display: table-cell;}
agora sim você pode usar o vertical-align: middle; na #cell ;)