Centralização de conteúdo

[eronventer 2]

Olá pessoal,

 

Estou com problema em centralizar a div #topo e a div #conteudo na index do site, no IE ela fica alinhada a esquerda.

Porém nas páginas internas onde a estrutura inicial é a mesma fica centralizada. :mellow:

 

#site {
width:100%;
display:table;
}

#topo {
width:970px;
height:432px;
margin: 0 auto;
position:relative;
}

#conteudo {
width:970px;
margin:0 auto;
position:relative;
}

 

<div id="site">
<div id="topo">
   	<img id="p1" src="assets/img/produto-home1.png" width="277" height="326" alt="" />
   	<img id="p2" src="assets/img/produto-home2.png" width="290" height="291" alt="" />
</div>
<div id="conteudo">
	<p>TEXTO</p>
</div>
</div>

[Diéssica 140]

Não entendi qual a necessidade do display:table, do width:100% (por padrão é 100%), position:relative... (?)

 

Não pode ser assim?

<style>
#site {
       margin:auto;
       width:970px;
}

#topo {
       height:432px;
text-align:center;
}

#conteudo {
       text-align:center;
}
</style>
<div id="site">
       <div id="topo">
       <img id="p1" src="assets/img/produto-home1.png" width="277" height="326" alt="" />
       <img id="p2" src="assets/img/produto-home2.png" width="290" height="291" alt="" />
       </div>
       <div id="conteudo">
               <p>TEXTO</p>
       </div>
</div>

 

Não confunda

text-align:center;

com

margin:auto;

 

E sempre quando for determinar

margin:auto;

determine um

width:(valor);

 

:bye: