Image vertical alignment in floated div

[son]

I had my thumbs nicely aligned with#rightGal img {vertical-align:middle;}Now, to have a box with a different background colour I had to put divs with constant height/width around the image that float to left side. My 'vertical-align: middle' does not work any more. I would like them to be aligned to midline of box now. How could I remedy this?Thanks,Son

[Dilated]

I had my thumbs nicely aligned with#rightGal img {vertical-align:middle;}Now, to have a box with a different background colour I had to put divs with constant height/width around the image that float to left side. My 'vertical-align: middle' does not work any more. I would like them to be aligned to midline of box now. How could I remedy this?

Just an idea, if all you wanted was the images to have a background color, why not just do something like this instead of of using a wrapper div:

img { border: solid red 20px; }

OR:

img { background: red; padding: 20px; }

Otherwise you could always set the wrapper divs to "display: inline-block;", they can have all the properties of both an inline and block element - that includes width, height, vertical align, etc.Just an example:

#wrapper { display: inline-block; width: 100px; height: 100px; line-height: 300px; vertical-align: middle; }

[son]

Just an idea, if all you wanted was the images to have a background color, why not just do something like this instead of of using a wrapper div:

img { border: solid red 20px; }

OR:

img { background: red; padding: 20px; }

Otherwise you could always set the wrapper divs to "display: inline-block;", they can have all the properties of both an inline and block element - that includes width, height, vertical align, etc.Just an example:

#wrapper { display: inline-block; width: 100px; height: 100px; line-height: 300px; vertical-align: middle; }

I cannot use the first suggested method as I need to have the divs at exactly the same dimensions. The second one (inline-block) I tried with vertical alignment set, but did not work...Son

[Dilated]

I cannot use the first suggested method as I need to have the divs at exactly the same dimensions. The second one (inline-block) I tried with vertical alignment set, but did not work...Son

You might have to adjust the line-height, I was just giving an example using arbitrary numbers. Mess around with it a bit.

[son]

You might have to adjust the line-height, I was just giving an example using arbitrary numbers. Mess around with it a bit.

Thanks, works now...Son

[Dilated]

Thanks, works now...Son

Also, if you know the height of the divs' containing block, it might more cross-browser compatible (line-height has issues cross-browser in my experience) to use float: left; with some margins. I just figured using inline-block would be an easier transition if you were going from images to block elements.Another options is to set the divs' containing block to "display: table;" and set the divs to "display: table-cell;", and add wrapper extra wrapper divs for "display: table-row;" if you need different rows for them. The vertical-align property applies to any elements with a display of table-cell.

[son]

Also, if you know the height of the divs' containing block, it might more cross-browser compatible (line-height has issues cross-browser in my experience) to use float: left; with some margins. I just figured using inline-block would be an easier transition if you were going from images to block elements.Another options is to set the divs' containing block to "display: table;" and set the divs to "display: table-cell;", and add wrapper extra wrapper divs for "display: table-row;" if you need different rows for them. The vertical-align property applies to any elements with a display of table-cell.

Many thanks again:-)Son