Ir para conteúdo

POWERED BY:

Arquivado

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

THCB

centralizar

Por , em Desenvolvimento frontend

Recommended Posts

THCB    0

THCB
Postado

vejam esse codigo:

 

<style type="text/css"> 
#testegeral {width:100%;text-align:center;height:800px;background:#FF6600;}
#teste {width:90%;margin:0auto;height:600px;background:#999999;}
#prod1,#prod2,#prod3 {width:50px;height:50px;background:#FFFF00;margin:20px;float:left;}
#prod1{width:150px;height:150px;float:left;}
#prod2 {width:150px;height:150px;float:left;}
#prod3 {width:150px;height:150px;float:left;}
</style>

<div id="testegeral"> 
	<div id="teste"> 
  	<div id="prod1"> 
    
    </div>
    
    <div id="prod2"> 
    
    </div>
    
    <div id="prod3"> 
    
    </div>
  	
  </div>
</div>

Preciso centralizar o cinza em relação ao laranja...e os 3 quadrados amarelos em relação ao cinza...como conseguir?

 

obs: as medidas precisam ser em porcentagem...ferrou-se ne?

 

alguem sabe me ajudar?

 

Desde já obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

tentei fazer algo rapidão aqui por que to de saida

Acho que da para ajudar até pensar em uma solução melhor:

 

<html>
<head>
<style type="text/css"> 
#testegeral {width:100%;text-align:center;height:800px;background:#FF6600;}
#teste {width:90%;margin:0auto;height:600px;background:#999999; margin-left: auto; margin-right: auto;}
#quadrados { width:570px; background:red; margin-left: auto; margin-right: auto;}
#prod1,#prod2,#prod3 {width:50px;height:50px;background:#FFFF00;margin:20px;float:left;}
#prod1{width:150px;height:150px;float:left;}
#prod2 {width:150px;height:150px;float:left;}
#prod3 {width:150px;height:150px;float:left;}
</style>
</head>
<body>
<div id="testegeral"> 
 <div id="teste"> 
 <div id="quadrados">
 <div id="prod1"> 
 
 </div>
 
 <div id="prod2"> 
 
 </div>
 
 <div id="prod3"> 
 
 </div>
 </div> 
 </div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Thelon,

 

já tinha um margin: 0 auto no #teste, porém grafado errado. =/

 

Um pouco estranho o seu CSS, THCB, pois você define duas propriedades diferentes para o mesmo elemento. Se decide aí. :lol: :P

 

<!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
#testegeral {width:100%;text-align:center;height:800px;background:#FF6600;}
#teste {width:90%;margin:0 auto;height:600px;background:#999999;}
#prods{ width: 270px; margin: 0 auto; }
#prod1,#prod2,#prod3 {width:50px;height:50px;background:#FFFF00;margin:20px;float:left;}
</style>
</head>
<body>
<div id="testegeral"> 
        <div id="teste"> 
        <div id="prods">
        <div id="prod1"> 
    
    </div>
    
    <div id="prod2"> 
    
    </div>
    
    <div id="prod3"> 
    
    </div>
    </div>
        
  </div>
</div>
</body>
</html>

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Tente organizar melhor seu CSS...

 

Dica: margin 0 auto; não funciona com elementos flutuados... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

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