Home > Article > Web Front-end > Why is My iFrame Not Centering Horizontally, and How Can I Fix It?
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!