為什麼我的 iFrame 不水平居中，如何修復？

水平居中iFrame

查詢：

考慮下面的程式碼片段：

HTML:
<div>div</div>
<iframe></iframe>

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

與周圍的div相反，為什麼iFrame元素無法居中對齊？如何解決此問題？

回應：

要讓 iFrame 水平居中，請套用 display: 區塊；其 CSS 屬性。這是修改後的程式碼：

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;
}

display: block;屬性將 iFrame 設定為區塊級元素，確保它佔據自己的行並與其他內容水平對齊。另外，邊框樣式：無；消除 iFrame 的預設邊框以保持居中框的外觀。

以上是為什麼我的 iFrame 不水平居中，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！