Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

zerrenner

{ Tableless } Alinhamento Vertical - O MITO

Por , em Desenvolvimento frontend

Recommended Posts

FabricioGomes    0

FabricioGomes
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Anderson Michels    0

Anderson Michels
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabricioGomes    0

FabricioGomes
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabricioGomes    0

FabricioGomes
Postado

silverfox, olha o que consegui... ainda nao fica 100%, a div nao fica do tamanho que desejamos, pois dependerá da altura do texto, mas já fica centralizado e com pouca gambiarra... so definir a altura do div dividindo entre o padding-top e bottom (se quiser uma div de 200, divide 100 pra cada, mas lembrando que tem a altura do texto...

 

<html><head><style>	#pleasewait {		border: 1px solid black;		text-align: center;		font: 10px Verdana;		width: 360px;		padding-top: 20px;		padding-bottom: 20px;	}</style></head><body><div id="pleasewait">Please wait...<br>segunda linha de texto</div></body></html>

postem se ocorre erro em algum browser, pois so testei no IE 7 e Firefox 2.0

 

 

PS: mudei o valor do padding de 100px para 20px.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Mas centralizar tanto na horizontal quanto na vertical elementos que sabemos a largura (width) e a altura (height) isso já não é mais novidade... Além do mais, você está usando um padding com valor muito alto para conseguir o efeito que deseja, não acha? Existem outras maneiras (mais chatinhas para quem não conhece muito bem CSS) de se fazer isso, mas que no meu ponto de vista seria mais "lógico" do que utilizar um padding com um valor desses...

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabricioGomes    0

FabricioGomes
Postado

nao, paulo, voce nao entendeu... a largura e altura fixa é do div, nao do texto... o que quero que seja resolvido é que eu tenha um "panel" de tamanho fixo, e que qq texto (que caiba no panel, claro) fique sempre centralizado horz e vert, o que consigo fazer com muita facilidade utilizando tabelas.o que quis exemplificar com essa gambiarra de padding, é que ao inves de utilizarmos o tamanho, colocamos um padding minimo que garanta que o texto fica centralizado, mas perdemos a questão da altura do panel fixa, pois ficará dependente da altura do texto...

Existem outras maneiras (mais chatinhas para quem não conhece muito bem CSS) de se fazer isso

que outras maneiras? ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Que tal line-height com a altura do elemento??[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado 

#divpai {position:relative;width:500px;height:500px;}#divfilho {position:absolute;width:400px;height:400px;margin-top:-200px;margin-left:-200px;top:50%;left:50%;}
^^

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabricioGomes    0

FabricioGomes
Postado

#INSIDE#

 

também nao funcionou... pelo menos no IE nem no FF... heheheh

o div fica centralizado em relacao ao pai, mas o texto nao...

 

abraços e obrigado pelas respostas.

 

alguem mais??

 

 

so para lembrar o que quero, preciso simular com DIV ou qq outra tag o efeito desse codigo

<table style='width: 270px; height: 270px; position: absolute; top: 200; left: 200; border: 1px solid black; text-align: center;'><tr><td>		Teste<br>segunda linha<terceira linha</td></tr></table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado
silverfox, ve la o que postei no seu topico... abraços!
Vê lah Fabricio jah arrumei uma soluçãoabraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

tygo    0

tygo
Postado
silverfox, ve la o que postei no seu topico... abraços!
Vê lah Fabricio jah arrumei uma soluçãoabraço
tentei tbém: http://forum.imasters.com.br/index.php?s=&...st&p=860861

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Andei brincando com o script que o silverfox postou no post 21, é só testarem.

 

<!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-br" lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Centralizado verticalmente</title><style type="text/css"> span.auxVertical{ 	width:0px; 	height:100%;}span.container{ 	text-align:center; 	width:300px; 	display:table-cell;}div.container{	border:1px #0f0f0f solid;	width: 300px;	height:500px;	display:table-cell;	text-align:center;	vertical-align:middle;}</style><!--[if IE]><style type="text/css"> span.auxVertical{	display:inline-block;	vertical-align:middle;}span.container{	display:inline-block;	vertical-align:middle;}</style><![endif]--></head> <body><div class="container"><span class="auxVertical"></span> <span class="container">	<img src="folder.gif" />	<br />	<p>teste</p></span></div></body> </html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito