[Resolvido] Alinhar imagem em DIV

[Desnickadu 0]

Fala galere, beleza ?!

 

[re]Comecei a desenvolver meu site e me deparei com esse probleminha :

 

Não consigo alinhar verticalmente essa imagem dentro da div!

Tentei o "vertical-align: middle" e mesmo com um "display: table-cell" dentro do div não obtive sucesso.

Para deixas as duas colunas do mesmo tamanho estou usando Faux Collumns

 

Segue os códigos:

 

HTML :

<div id="coluna1">
<p>Lorem ipsum dolor sit amet, </p>

<p>Integer id leo nunc, </p>

<p>Aenean interdum mattis posuere.</p>

<p>Nunc sollicitudin </p>

<p>Nulla ultricies, </p>

</div>
<div id="coluna2">
<img src="/imagem/storm.png" alt="storm image" />
</div>

CSS :

#conteudo {
	clear: both;
	width: 850px;
	margin-left: 15px;
	margin-top: 15px;
	padding: 10px;
	overflow: hidden;
}
#coluna1{
	float: left;
	padding: 10px;
	margin-right: 15px;
	margin-top: 15px;
	width: 500px;
	background-color: #ccc;
	color: #000;
	text-indent: 30px;
	padding-bottom: 1000em;
    margin-bottom: -999.5em;
}
#coluna2 {
	float: right;
	padding: 10px;
	margin-right: 15px;
	margin-top: 15px;
	width: 280px;
	background-color: #999;
	color: #000;
	padding-bottom: 1000em;
    margin-bottom: -999.5em;
}
#coluna2 img {
		margin-left: 15px;
	
}

existe a possibilidade de alinhas isso somente com CSS ?

[Thiago Retondar 18]

Quer alinha ao meio?

 

Coloque position: relative da div que engloba e faça isso na imagem:

 

img{
position: absolute;
top: 50%;
height: 500px; /* Coloque aqui o tamanho da imagem */
margin-top: -250px /* Coloque aqui a metade do tamanho da imagem */
}

É melhor forma de fazer para ficar bom em todos os browsers.

 

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

[Desnickadu 0]

vlw cara

funcionou :)

 

só precisou de um "min-height" no "#conteudo" pra ficar certinho x]