首頁 > web前端 > css教學 > 主體

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

Susan Sarandon
發布: 2024-10-31 03:58:01
原創
427 人瀏覽過

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板