H and V centered div

[traucostar]

Hello!
Hope someone can help me.

I have this (The image is H and V Centered):
http://img36.picoodle.com/img/img36/2/5/19/traucostar/f_a1m_cda5026.jpg

But I need this:
http://img29.picoodle.com/img/img29/2/5/19/traucostar/f_a2m_3d09a89.jpg


<style>
div.album1 {
padding-left:auto;
padding-right:auto;
height:120px;
width:120px;
background-color: green;
text-align:center;
vertical-align:middle;
}
div.album2 {
height:100px;
width:100px;
background-color: blue;
display:table-cell;
position:relative;
vertical-align:middle;
}
</style>

<div class="album1">
<div class="album2">
<img src="1.jpg">
</div>
</div>

Thanks!!!

[hkp]

use align:center in the class div.album2. it is here..



<style>
div.album1 {
padding-left:auto;
padding-right:auto;
height:120px;
width:120px;
background-color: green;
text-align:center;
vertical-align:middle;
}
div.album2 {
height:100px;
width:100px;
background-color: blue;
display:table-cell;
position:relative;
vertical-align:middle;
align:center;
}
</style>

<div class="album1">
<div class="album2">
<img src="1.jpg">
</div>
</div>

[traucostar]

It doesnt work....
:(

[forum_amnesiac]

Try this, you probably need to experiment with the 'top' and 'vspace' values.


<style>
div.album1 {
padding-left:auto;
padding-right:auto;
height:120px;
width:120px;
background-color: green;
text-align:center;
}
div.album2 {
height:100px;
width:100px;
position:relative;
top:10px;
background-color: blue;
display:table-cell;
}
</style>

<div class="album1">
<div class="album2">
<img src="1.jpg" vspace="10">
</div>
</div>