Search code examples
htmlcssiframecenter

How to sit 2 iframes side by side in the center?

I am trying to sit 2 iframes side by side and have them both in the center of a page. The DIV that surrounds them has all text etc in central but the iframes sit either left or right based on the align tag but not in the middle.

HTML:

<div class="box">
    <iframe src="iframe content" width="64" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" align="left">
    </iframe>
</div>
<div class="box">
    <iframe allowtransparency="true" frameborder="0" scrolling="no" src="iframe content" style="height:20px;" align="right">
    </iframe>
</div>

CSS:

.box iframe{
    display:inline-block;
}   

.clear{
    clear:both;
}
Solution

  • You can add 

    .box{ text-align:center;}

    for iframe you can use float left as well. or else even display: inline-block is fine as well.