How to Center an Iframe Horizontally in HTML and CSS?

Centering an Iframe Horizontally

Consider the following HTML and CSS:

<div>div</div>
<iframe></iframe>

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

The goal is to center the iframe horizontally like the div.

However, the iframe remains left-aligned. This is because iframes are by default inline elements. Inline elements don't respect margin: 0 auto; horizontally.

To center the iframe, you need to make it a block element. This can be done by adding display: block; to the iframe's CSS:

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

With this addition, the iframe will become a block element and will respond to margin: 0 auto;. This will center it horizontally like the div.

The above is the detailed content of How to Center an Iframe Horizontally in HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!