horizontally centering an image(s) in an iframe within a div

Question

I have looked all over and tried all sorts of different coding with defining the width and display; block and nothing seems to work.

I am trying to center any image I put within this iframe that is located in a div. So far everything I've tried has kept the image aligned to the left. Here is the code. Hopefully someone can help.

#apDiv2 {
    position:absolute;
    width:1020px;
    height:490px;
    z-index:2;
    left: 0;
    top: 300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    clip: rect(auto,auto,auto,auto);
}

#bottomframe {
    height:490px;
    width:1020px;
    border:none;
    scrolling:no;
    display: block;
    margin: 0 auto;
    border: 0;
}

The HTML code is as follows:

<div id="apDiv2">
    <iframe id="bottomframe" name="bottomframe" src="fliers/image1blurthumb.png">
    </iframe>
</div>

Answer 1

You cannot do it this way. Since it's an iframe, it has a separate document context and styles. You'd have to use javascript to inject CSS into the iframe, but since you are opening the image directly in the frame, you have no HTML document in there to append styles to.

But I got to ask, why on earth are you using an iframe to display an image? Why not just a regular IMG tag?

Answer 2

Try adding text-align:center to the #bottomFrame style. That should center the image within the iframe. You may also need to give the iframe position.

The image must be less than 1020px wide, though, for centering to occur.