Alinhar div no centro da página

[Eduardo Kalsing 0]

Boa tarde!

 

Tenho 3 divs (uma ao lado da outra) e gostaria de alinhar a do meio, no centro da página.

No caso da resolução do meu pc, as div's esquerda e direita, então, não vão aparecer completamente.

 

Como posso fazer isso?

 

Obrigado!

[Alisson Zampietro 6]

Tente dar um margin:auto;

[Wanderson Valerio 102]

div.minha-div {
   width: 500px;
   height: 300px;
   outline: 1px solid #000;
   position: relative;
   left: 50%;
   margin-left: -250px;
}

<div class="minha-div">

</div> <!-- /div.minha-div -->

 

A `div` terá 500px de largura, então, quando damos margin-left, temos que negativá-lo pela metade do valor da largura da `div`.

[José da Silvasauro 7]

Coloca as 3 divs dentro de uma alinhada ao centro que as 3 ficara centralizadas.

[Marcos Xavier 189]

Seria melhor colocar como está o seu html e css. Fica mais simples para gente ajudar.

[Eduardo Kalsing 0]

Galera, postando o HTML e CSS então.

 

HTML:

<div id="main">
   	<div id="main-e"></div>
       <div id="main-m"><!--conteudo--></div>
       <div id="main-d></div> 

 

CSS:

/* CSS Document */
body{
background: #fff;	
margin: 0;
padding: 0;
font-family: Tahoma, Geneva, sans-serif;
}
img {
border: 0;	
}
h1{
display: none;	
}
#main{
height: 600px;
width: 1680px;
top: 50%;
position: absolute;
margin: -325px 0 0 0;
padding: 0;	
}
#main-e{
margin: 0;
padding: 0;
width: 359px;
height: 650px;
float: left;
background: url(../imgs/bckg-e.jpg) no-repeat;
}
#main-m{
margin: 0;
padding: 0;
width: 961px;
height: 650px;
float: left;
background: url(../imgs/bckg-m.jpg) no-repeat;
}
#meio-e{
	margin: 0;
	padding: 0;
	width: 480px;
	height: 100%;	
	float: left;		
}
.logotipo{
	margin: 115px 0 0 0;
	padding: 0;	
}
.link-download img{
	margin: 20px 0 0 0;
	padding: 0;	
}
.txt-apresentacao{
	margin: 10px 0 0 0;
	padding: 0;
	width: 405px;
	font-size: 13px;
	text-align: justify;
	color: #FFF;
}
.distribuicao{
	margin: 25px 0 0 0;
	padding: 0;	
}
.cidade{
	font-weight: bold;
	font-size: 12px;
	color: #FFF;
	margin: 0;
	padding: 0;	
}
.distribuidora{
	font-size: 11px;
	color: #FFF;
	margin: 5px 0 0 0;
	padding: 0;	
}
.dist-e{
	margin: 0;
	padding: 0;
	width: 190px;
	float: left;
}
.dist-d{
	margin: 0;
	padding: 0;
	width: 210px;
	float: left;	
}
.dist-facsom{
	margin: 20px 0 10px 0;
	padding: 0;	
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
}
.facsom-dados{
	font-size: 12px;
	color: #FFF;
	margin: 5px 0 0 0;
	padding: 0;	
}
.facsom-dados a{
	color: #FFF;
	text-decoration: none;	
}
.facsom-dados a:hover{
	text-decoration: underline;	
}
#meio-d{
	margin: 0;
	padding: 0;
	width: 430px;
	height: 100%;
	float: right;
}
#meio-d h2{
	margin: 115px 0 0 50px;
	padding: 0;
	font-size: 14px;
	width: 335px;
	color: #FFF;	
}
form{
	margin: 15px 0 0 50px;
	padding: 0;
	font-size: 13px;
	color: #FFF;
}
.campo-texto{
	width: 338px;
	height: 34px;
	background: url(../imgs/input.png) no-repeat;
	padding-left: 20px;
	font-size: 11px;
	color: #FFF;
	border: 0;	
	outline: none;
}
textarea{
	width: 339px;
	height: 124px;
	background:url(../imgs/textarea.png) no-repeat;
	border: 0;
	padding: 20px 0 0 20px;
	color: #fff;
	resize: none;
	outline: none;
}
input[type="submit"]{
	width: 73px;
	height: 19px;
	background: url(../imgs/botao-enviar.png) no-repeat;
	border: 0;
	margin-right: 20px;	
	cursor: pointer;	 
   }
#main-d{
margin: 0;
padding: 0;
width: 360px;
height: 650px;
float: left;
background: url(../imgs/bckg-d.jpg) no-repeat;	
}

 

só esqueci ali em cima de fechar a div "main"

[Marcos Xavier 189]

Acredito que você queira centralizar também a '#main'. Para isso basta

#main{

....

margin:0 auto;

...

}

 

Tente diminuir a largura das 3 divs. Testei aqui e funcionou.

Costumo colocar bordas nas divs para ir posicionando-as nos devidos lugares

Exemplo:

main-e{border:1px blue solid;}
main-m{border:1px red solid;}
main-d{border:1px green solid;}

Ao colocar as bordas,como no exemplo acima, o tamanho aumenta. Neste exemplo se

#main-e tiver a largura de 360px somar-se-a mais 360px+1px+1px (largura+bordadireita+bordaesquerda)

[Eduardo Kalsing 0]

Marcos, com esse "margin: 0 auto", não rolou

[Eduardo Kalsing 0]

Marcos, com esse "margin: 0 auto", não rolou

[Marcos Xavier 189]

Foi mal.

Retire o position:absolute da #main.

[Eduardo Kalsing 0]

Bah, agora que vi que postou 43432 de vezes o meu post hehe

 

Mas cara, tive que desistir de fazer esse esquema com 3 div's e a do meio ficar centralizada. O que fiz agora, foi colocar a imagem num todo de fundo.

 

Acho que o que eu tava querendo fazer, é impossível só com HTML+CSS.

 

Obrigado pela ajuda mesmo assim!