如何在 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中文網其他相關文章！