Problema com centralização no Firefox e Opera

[kidh0 0]

Olá pessoal, tudo tri??? To começanco a transformar um álbum de fotos em tableless... ou algo parecido pelo menos...

 

Mas to com um problema, primeiro o css:

 

.album{	text-align:center;	width:710px;	margin:10px 0px 10px 0px;}.thumb1, .thumb2{	width:120px;	height:120px;	float:left;	padding:10px;	background-color:#f0f0f0;	border:1px solid #c0c0c0;}.thumb2{	background-color:#FFFFFF;}

Bom, no IEca tá funcionando, mas no FireFox e no Opera não, os thumbs ficam alinhados a esquerda sempre, no canto da <div class='album'>

 

o álbum é estruturado assim:

 

<div class='album'>

<div class='thumb1'><img ...></div>

<div class='thumb2'><img ...></div>

<div class='thumb1'><img ...></div>

...

</div>

 

Os thumbs ficam todos perfeitos, mas a div album fica sempre na esquerda <_<

 

Alguém podia me dar uma idéia de como fazer a div album ficar centralizada???

[giga_fire 0]

Pelo que eu entendi você quer que as miniaturas fiquem centralizadas e com bordas e fundos intercalados?

 

Simples... faça assim...

 

<div class="album"><img class="thumb1" /><img class="thumb2" /><img class="thumb1" />...</div>

Não precisa de mais nada... apenas tire o "float: left;" do código CSS e pronto...

 

Espero ter ajudado :D

[pa_bruno 0]

mostrei isso no meu artigo também... bom sempre dar uma olhada em como colocar divs centralizados... primeiro coloque no body um text-align:

body { text-align: center; }

ou entaum coloque no div que está antes do .album...

 

depois, acrescente esta linha no .album:

.album{text-align:center;width:710px;margin: auto;margin: 10px 0;}

ainda dei uma recicladinha no seu css... falarei sobre isso mais detalhadamente no meu quarto artigo...

 

falow http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif