Home > Web Front-end > CSS Tutorial > Why is My iFrame Not Centering Horizontally, and How Can I Fix It?

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

Susan Sarandon
Release: 2024-10-31 03:58:01
Original
435 people have browsed it

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;
}
Copy after login

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;
}
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template