Why Is My Iframe Not Centering? (The `display` Property Fix)

Horizontal Centering of Iframes

If you encounter an iframe that is not horizontally centered despite using margin: 0 auto;, the issue may lie in the display property of the iframe. By default, iframes have an inline display, which prevents them from aligning with block-level elements like divs.

To resolve this issue and center the iframe horizontally, add the following CSS rule:

<code class="css">iframe {
    display: block;
}</code>

This change sets the display property of the iframe to block, allowing it to behave like a block-level element. Consequently, the iframe will now correctly align horizontally with the surrounding div.

Therefore, the following updated CSS code will center both the div and the iframe horizontally:

<code class="css">div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

iframe {
    display: block;
    border-style: none;
}</code>

The above is the detailed content of Why Is My Iframe Not Centering? (The `display` Property Fix). For more information, please follow other related articles on the PHP Chinese website!