Create image gallery with vertically centered images of unknown height (css-html)

Question

I'm using this code:

<div id="OptionsPanel">
    <div style="float: left; width:300px; height:auto; background-color:Blue">
        <div style="display:table-cell; vertical-align: middle;">
            <div style=" display:inline-block;">
                <img src="Media/1/M113906106291W.jpg" id="ctl06_MediaImage" alt="Option 1" />
            </div>
        </div>
    </div>
    <div style="float: left; width:300px; height:auto; background-color:Blue">
        <div style="display:table-cell; vertical-align: middle;">
            <div style=" display:inline-block;">
                <img src="Media/1/M113906106292W.jpg" id="ctl07_MediaImage" alt="Option 2" />
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>
</div>

Here is the code in JSFiddle: http://jsfiddle.net/EfkxR/

Problem is the floating divs height is not being correctly set with the clearing and thus the images are vertically not centered.

With that code i get:

And this is what i want: Each row of the gallery show look like this with the height being the one of the tallest image:

Note: If i set the height of the floating divs to a number, the images are centered correctly, but i don't know that height before i create the divs.

Answer 1

The solution to this problem is using the table-cell display properly and avoid the floating:

<div id="OptionsPanel">
<div style=" width:300px; display:table-cell; vertical-align: middle; background-color:Blue;   ">
        <div style=" display:inline-block;">
            <img src="Media/1/M113906234611W.jpg" id="ctl06_MediaImage" alt="Option 1" />
        </div>
    </div>
    <div style=" width:300px; display:table-cell; vertical-align: middle; background-color:Blue;   ">
        <div style=" display:inline-block;">
            <img src="Media/1/M113906234612W.jpg" id="ctl07_MediaImage" alt="Option 2" />
        </div>
    </div>
</div>

My error was thinking that a clear would make floating divs as tall as their parent.

Using table-cells makes them automatically as tall as the parent div. height:100% or min-height: 100% doesn't work normally.

Answer 2

The <center> tag is deprecated. Use <img align="middle" ...> instead. Also a good practice is doing stuff like this in CSS.