Why is My iFrame Not Centering Horizontally, and How Can I Fix It?

Horizontally Centering an iFrame

Query:

Consider the code snippet below:

HTML:
<div>div</div>
<iframe></iframe>

CSS:
div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

Contrary to the surrounding div, why does the iFrame element fail to align centrally? How can this be fixed?

Response:

To center an iFrame horizontally, apply the display: block; property to its CSS. Here's the revised code:

HTML:
<div>div</div>
<iframe></iframe>

CSS:
div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

iframe {
    display: block;
    border-style:none;
}

The display: block; property sets the iFrame to behave as a block-level element, ensuring it occupies its own line and aligns with other content horizontally. Additionally, border-style: none; eliminates the iFrame's default border to maintain the appearance of a centered box.

The above is the detailed content of Why is My iFrame Not Centering Horizontally, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!