如何在 HTML 和 CSS 中水平居中 Iframe？

使 iframe 水平居中

考虑以下 HTML 和 CSS：

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

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

目标是像 div 一样使 iframe 水平居中。

但是，iframe 保持左对齐。这是因为 iframe 默认情况下是内联元素。内联元素不考虑边距：0 auto;水平方向。

要使 iframe 居中，您需要将其设为块元素。这可以通过添加 display: block; 来完成。添加到 iframe 的 CSS：

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

添加此内容后，iframe 将成为块元素并响应 margin: 0 auto;。这将使其像 div 一样水平居中。

以上是如何在 HTML 和 CSS 中水平居中 Iframe？的详细内容。更多信息请关注PHP中文网其他相关文章！