Alinhamento vertical e horizontal dentro de um div

[danielvlopes 0]

Olá pessoal, estou desenvolvendo um site mas estou com um probleminha com alinhamentos de div.

Gostaria de ajuda de alguem para solucionar o erro.

 

O link do site é: REALMINAS

O link do CSS é: CSS

 

Nesta pagina tenho dois divs cinza dentro da parte branca, são os divs que contém texto, gostaria de saber como faço para centralizalos na horizontal e vertical. Eles se encontram dentro de outro div chamado #container.

 

No FF o alinhamento vertical funcionou perfeitamente mas no IE nada, já o alinhamento horizontal consegui por meio de margin mas acaba estragando a dimensão do div que contem os dois divs que quero alinhar. Se eu empregar padding no DIV que contem os dois divs também estraga o tamanho do DIV pai.

 

Obrigado, pode ser que já tenha alguma coisa aqui no forum sobre isso, mas não encontrei nada desta forma.

Agradeço a quem puder ajudar.

[Luiz Henrique 1]

Acho que neste tópico você encontra agumas possibilidades

http://forum.imasters.com.br/index.php?showtopic=201657

[Giovani 104]

Aqui no fórum tb tem bastante coisa, basta dar uma pesquisada!!!

[danielvlopes 0]

Valeu moçada. Vou dar uma olhada, e obrigado pelo toque Thiago.

[Guilherme Rambo 4]

Soh algo mais prático:

* {text-align:center;vertical-align:middle;}

Colocando isso no seu css, todos os elementos ficarão alinhados na horizontal e na vertical http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[danielvlopes 0]

Essa opção do INSIDE não funciona, para colocar um div ao lado do outro estou usando flota:left; pode ser por este motivo que não está centralizando o divs dentro do div pai. Se for isto como faço para colocar um div um ao lado do outro?

[Giovani 104]

Artigos sobre posicionamento, by pa_bruno!

 

Uma ótima leitura a todos! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[danielvlopes 0]

Ok, já vi todos estes artigos e links, mas acho que não claro na minha pergunta.Tem algum jeito de definir um div ao lado do outro e mantelos flutuando no centro do um outro div sem usar margin ou padding? Tem alguma tag que centralize automático?

[Carlos Vital 0]

Eu acho que você não leu os artigos.

no primeiro artigo esta valando como alinhar.

olha ai o que está dizendo:

Relative - semelhante com a static, mas com uma pequena diferença, ela aceita os atributos adicionais left /ou top como complemento.

 

#nomeDiv {

Position: relative; /* deixando o elemento com uma posição relativa à seu “pai” */

Top: 50px; /* deixando o topo do elemento 50 pixels mais abaixo do seu “pai” */

Left: 50px; /* deixando o elemento 50 pixels mais a direita do seu “pai” */

Background-color: #CCCCCC; /* definindo uma cor cinza claro de background */

width: 100px; /* definindo 100px de largura pro div */

}

Só que no lugar de Top:50px e Left:50px, você coloca Top:50% e Left:50%

[danielvlopes 0]

Eu vi este artigo.O meu problema é outro, você não leu minha pergunta toda.Oque não quero é ficar definindo distancia na mão por exemplo top 50px e left 50px e position relative, pq relative vai f**** o meu layout todo estourando os divs independente do limite do pai.Estou fazendo assim:.janela{ float: left; text-align: left; border:#E4E4E4 solid; border-width:thin; position: static; margin-left: 15px; margin-bottom:15px; margin-right: 15px; margin-top:15px; padding:8px;}Mas estou com uma dúvida, quando defino o pading 15px por exemplo ele está aplicando o padding ao pai e não a classa janela. Alguem pode me dize o pq?

[Carlos Vital 0]

Agora eu intendi.

Me desculpe, mas eu li sua pergunta toda sim.

mas você não disse nada sobre usar php puxando de um banco.

e me desculpe denovo se eu não intendi a sua pergunta

 

caso você vor usar php puxando de um banco ai vai a minha dica:

o div redimencionar sozinho isso com css eu acho que vai ser meio dificil a não ser que você não enpecifique o tamanho do HEIGHT.

ou então talves com Java script você consiga.

 

e nesse css que você postou ai agora você tem que fazer o margin assim:

margin: 5px 0px 5px;

[danielvlopes 0]

Ok, obrigado carlos henrique.

Consegui resolver o problema mas acabei definindo cada margem uma por uma.

O resultado ta ai:

http://www.havocbmx.com/area/realminas/

 

css:

http://www.havocbmx.com/area/realminas/tem...s/realminas.css

 

Mas o margin-bottom não funciona no IE nem a pau, alguem sabe o pq?