{ Tableless } Alinhamento Vertical - O MITO

zerrenner · Maio 23, 2005

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

_ nEoN _ · Maio 23, 2005

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 ;)

zerrenner · Maio 24, 2005

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"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt"><head><title>Vertical Align</title><style type="text/css"><!--#main {display: table;}#row {display: table-row;}#cell {display: table-cell;background-color: #CCCC00;height: 200;vertical-align: middle;}--></style></head><body><div id="main">   <div id="rows">	 <div id="cell">ok</div>  </div></div></body></html>

Valeu pela força!

Abraço!

Cleber

_ nEoN _ · Maio 24, 2005

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

zerrenner · Maio 25, 2005

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

marcinhha · Maio 25, 2005

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?

zerrenner · Maio 26, 2005

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.

d.eleete · Junho 2, 2005

Tem q usar com cautela a tabela já que ela exibe seu conteudo somente depois de inteiramente carregada. Se falei m**** me corrijam...

diegopsi · Março 15, 2006

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 certo

tanto 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%

...

festamix · Julho 26, 2007

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

ANL · Agosto 15, 2007

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.

T.P. · Agosto 15, 2007

Não é culpa da linguagem e sim do IE que não segue os padrões...... Nos demais navegadores é possivel fazer...

Guilherme Rambo · Agosto 15, 2007

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

FabricioGomes · Agosto 17, 2007

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>

brcontainer · Agosto 18, 2007

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>

FabricioGomes · Agosto 20, 2007

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.

brcontainer · Agosto 20, 2007

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"></script></head><body><script type="text/javascript">	var vTime;	function centraliza(){		var ids = new Array();		ids.push("div.alinhar");		for(x=0;x<ids.length;x++){			divs = $(ids[x]);			for(i=0; i<divs.length; i++){				h = divs[i].offsetHeight;				hp = divs[i].childNodes[0].offsetHeight;				padd = parseInt((h-hp)/2);				nh = h-padd;				$(divs[i]).css( { height: nh+"px" } );				$(divs[i]).css( { paddingTop: padd+"px" });			}		}	}	$(document).ready(function(){		vTime = setTimeout("centraliza()", 1000);	});</script>  <div class="alinhar"><div><img src="http://www.tuliofaria.net/arquivos/alinhamento_vertical.gif" />texto</div></div></body></html>

fui

brcontainer · Agosto 20, 2007

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">texto

fiz uma gambiarra com esse "codigo" porem ocorre o seguinte o texto quebra para baixo da imagem

faç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 texto

FabricioGomes · Agosto 20, 2007

calma, 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!

brcontainer · Agosto 20, 2007

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"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><style> #edge { width:0; height:100%;display:inline-block;vertical-align:middle;} #container { text-align:center; width:100%; display:inline-block; vertical-align:middle;}div{border:1px #0f0f0f solid;height:500px;}</style> <body><div><span id="edge"></span> <span id="container"><b class="css">CSS</b><span class="play">play</span><br />This text should be in the centre of your screen<br />(That's the English spelling of 'centre' by the way.)<br />Resize the window and the text will reposition itself.<br />The text will not go off the left/top of the screen.<br />A vertical scroll bar will be added as necessary.</span></span></div></body> </html>

Arquivado

{ Tableless } Alinhamento Vertical - O MITO

Recommended Posts

zerrenner 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

_ nEoN _ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

zerrenner 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

_ nEoN _ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

zerrenner 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcinhha 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

zerrenner 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

d.eleete 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

diegopsi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

festamix 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ANL 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

T.P. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Rambo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

FabricioGomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

FabricioGomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

FabricioGomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16