首页 > web前端 > css教程 > 正文

为什么我的 iFrame 不水平居中,如何修复?

Susan Sarandon
发布: 2024-10-31 03:58:01
原创
371 人浏览过

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
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!