首頁  >  文章  >  web前端  >  為什麼我的 iFrame 不水平居中,如何修復?

為什麼我的 iFrame 不水平居中,如何修復?

Susan Sarandon
Susan Sarandon原創
2024-10-31 03:58:01348瀏覽

Why is My iFrame Not Centering Horizontally, and How Can I Fix It?

水平居中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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn