Vertical aligning pictures inside div

[Vidar_]

I'm having a problem with vertical aligning a picture inside a div.

A stripped down example can be found here:

http://195.26.0.159/test.htm

I've tried different things, but something in my code seems to break all the examples I've found.

Any hints or suggestions on what I'm doing wrong would be appreciated!


Vidar

[iTechno]

body{
 color:#696969;
 font-weight:normal;
 font-family:verdana;
 text-decoration:none;
 font-size:11px;
}

body img {
vertical-align: bottom;
}

#product{
text-align:center;
vertical-align:middle;
padding:0px;
margin-bottom:10px;
border:1px solid black;
width:330px;
height:300px;
position:relative;
display: table; 
overflow: hidden;
}

#productimage{
height:265px;
display: table-cell;
vertical-align: bottom;
}

h1{
font-size:18px;
padding:4px;
font-weight:bold;
}


p{
font-size:11px;
padding:1px;
}
table{
font-size:11px;
padding:1px;
}

#content{
padding:0px;
width: 950px;
width /**/:950px;
border:1px solid darkgray;
height:500px;
}
html > body #content{min-height: 500px; height: auto;}


#mainrow{
background-color:white;
padding:0px;
width: 950px;
width /**/:950px;
}

html > body #mainrow{overflow: hidden;}

html > body #content{min-height: 500px; height: auto;}


#maincontent{
float:right;
display:inline;
background-color:white;
padding:15px;
width: 730px !important;
width /**/:768px;
text-align:left;
height:auto;
}

html > body #maincontent{min-height: 470px; height: auto;}


#product a:link{
  color:#006B96;
margin:-10px;
font-size:14px;
font-weight:bold;
}

#product a:visited{
  color:#006B96;
margin:-10px;
font-size:14px;
font-weight:bold;
}

#product a:hover{
  color:blue;
}

Works.

[Vidar_]

Matt:

Thanks for the reply!

It doesn't work here.. I've updated the test page with your css, but it doesn't change anything..

Just so I'm clear, I want the pictures to be vertically centered(middle) in the productimage div. The productimage div is set to the correct height(265px).

I haven't begun to look at it in Firefox yet.. I know there are some paddings that will mess it up..

The code without the change suggested by Matt can be found at http://195.26.0.159/test2.htm


Vidar

[Paul O'B]

Hi,

Firefox won't let you absolutely place that element within the table cell while display:table is active. As you are using a table anyway why don't you simply use the table cell to carry out the vertical and horizontal centering and place the caption in a another cell underneath.

If you want a css solution then I have some similar demos here but they are a little complicated to understand.

http://www.pmob.co.uk/temp/vertical-align12.htm

http://www.pmob.co.uk/temp/vertical-align10.htm

[iTechno]

I haven't begun to look at it in Firefox yet.. I know there are some paddings that will mess it up..

I just looked at it in Firefox and it was working.

[Paul O'B]

I just looked at it in Firefox and it was working.

It's not in mine

In my firefox the images are aligned to the bottom of the cell and not the middle and all the captions are way outside the table at the bottom left corner of the screen and on top of each other (for the reasons I mentioned in my earlier post).

[Vidar_]

I just looked at it in Firefox and it was working.

It's not working in mine.. Mine looks like what Paul described..


Vidar

[Vidar_]

Hi,

If you want a css solution then I have some similar demos here but they are a little complicated to understand.

http://www.pmob.co.uk/temp/vertical-align12.htm

http://www.pmob.co.uk/temp/vertical-align10.htm

I've tried to use your css code, and the pictures are aligned correctly in Firefox, but not in IE.

http://195.26.0.159/test4.htm

Can you see why it doesn't work in IE?

Vidar

[Paul O'B]

Hi,

Can you see why it doesn't work in IE?

Yes - you left out the ie specific code

<!--[if IE]>
<style>
.wrap span{position:absolute;top:50%;width:100%;left:0}
.wrap a img {
 cursor: hand;
 position:relative;
 top:-50%;
 margin-top:-20px;
}
</style><![endif]-->

That's what makes it work for ie

[Vidar_]

Thanks Paul.. I had never seen that syntax to use IE specific code before, so I just removed it... It works perfectly now..

Vidar