為什麼我的 iframe 不水平居中？

如何將 iframe 水平居中

最初的問題強調了 iframe 未在其父 div 中居中對齊的情況。下面概述了此問題的原因和解決方案。

iframe 無法正確居中

在提供的HTML 和CSS 程式碼中，iframe 與div 一起渲染寬度、高度、邊距和背景顏色使用類似的屬性。然而，iframe 並不像 div 那樣居中對齊。這是因為 iframe 本質上是內聯元素，這意味著它們佔用的空間與其內容一樣寬。

解決方案：新增 'display:block;'

居中對齊iframe，需要將其從內嵌元素轉換為區塊元素。這可以透過將以下CSS 屬性新增至iframe 來完成：

<code class="css">display: block;</code>

其他調整

此外，為了確保正確對齊並防止任何邊框顯示在iframe 中，可以應用以下CSS：

<code class="css">border-style: none;</code>

更新的CSS：

<code class="css">div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

iframe {
    display: block;
    border-style: none;
}</code>

透過實作這些更改，iframe 現在將在它的父div。

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