Vertically centering with Tables - css

Question

I have an iframe and a div inside a container. The two of them need to be vertically centered. After reading a few posts on tables to center, I gave it a try but to no avail. The iframe continues to stick to the top left border even though I have the iframe 'display' property set to 'table-cell' & 'vertical-align' to 'middle'.
The HTML code:
<!-- the container div -->
<div id="iframe_r_container">
<!-- iframe -->
<iframe id="iframing" src="mannequin.html" frameborder="0" ></iframe>
<!--div--> <div id="right_container">
<div id="user_credit">
<h1>Username</h1><br />
has <span id="credits">20,000</span> credits.
</div>
<div> <button id="template_button"><img src="images/Coutallure-WebApp/template_button.png" /><span>Templates</span></button> </div>
</div>
And here is the CSS:
/* START OF IFRAME_R_CONTAINER */
#iframe_r_container {
position: absolute;
display: table;
top: 48px;
bottom: 38px;
width: 960px;
}
/* START OF IFRAME */
#iframing {
display: table-cell;
width: 640px;
height: 480px;
vertical-align: middle;
}
/* END OF IFRAME */
/* START OF RIGHT CONTAINER */
#right_container {
display: table-cell;
vertical-align: middle;
width: 113px;
margin: 20px;
}
I have been stuck at this for half a day today so any help would be immensely appreciated.

Answer 1

If you don't mind using another technique than table-cell centering, you can try something like this :
#iframe_r_container {
position: absolute;
top: 48px;
bottom: 38px;
width: 960px;
}
/* START OF IFRAME */
#iframing {
position: relative;
top: 50%;
margin-top: -240px;
width: 640px;
height: 480px;
float: left;
}
/* END OF IFRAME */
/* START OF RIGHT CONTAINER */
#right_container {
position: relative;
top: 50%;
height: 113px;
margin-top: -57px;
margin-left: 670px;
width: 113px;
}
It works here on my FF/mac but you'd have to test it on other browser.
To center #right_container, you'd have to give it a heigh (here 113px) and set the negative margin-top accordingly.
Also, you may want to give a min-height: 640px to #iframe_r_container to avoid the iframe overflowing outside of its container.

Answer 2

I am not sure what are you trying to achieve, but just from reading your post - you cannot try centering element itself with some align property, this must be property of its parent element. You should try that margin, i think this is the right property to work with.

Answer 3

Adding "height" to your containers should do it. Just adding it to your iframe container worked for me in FF on my Mac.
#iframe_r_container {
position: absolute;
top: 48px;
bottom: 38px;
width: 960px;
height:480px;
}
(Note: Internet Explorer 8 (and higher) supports the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" only if a !DOCTYPE is specified.)

Answer 4

try these settings:
/* START OF IFRAME_R_CONTAINER */
#iframe_r_container {
position: absolute;
top: 48px;
bottom: 38px;
width: 960px;
}
/* START OF IFRAME */
#iframing {
width: 640px;
height: 480px;
margin: 0 auto;
}
/* END OF IFRAME */
/* START OF RIGHT CONTAINER */
#right_container {
vertical-align: middle;
width: 113px;
margin: 0 auto;
}
The attribute margin: 0 auto; will (hopefully) center your iframe and other div inside the container. Not tested but give it a try.