只要你够狠

普陀申木

 

 

 

 

马黑黑

让 iframe 框架帖在论坛中居中的方法


先看一楼原始核心代码（代码已做格式化处理）：

<p>
    <iframe frameborder="0" scrolling="no" src="iframe地址" style="width:960px;height:600px;"></iframe>
</p>

这是使用段落标签 <p>...</p> 包裹 <iframe>...</iframe> 标签。让我们改写一下：<iframe> 标签不动，修改 <p> 标签为 <div> 标签、并给 <div 标签加上 style 行内属性：

<div style="margin: 30px 0; width: fit-content; height: fit-content; left: calc(50% - 81px); transform: translateX(-50%);">
    <iframe frameborder="0" scrolling="no" src="iframe地址" style="width:960px;height:600px;"></iframe>
</div>

蓝色代码部分就是外层div的 style 属性，用于设置该div的样式：

margin: 30px 0; /* 表示外边距上、下都是30px，左、右都是0，可以调整上下值大一点（比如120px）以便露出头像 */

width 和 height 属性设置为自适应，也就是由里面的 <iframe> 决定其宽高，不用修改任何值；

left 和 transform 配套使用是居中的关键，其中，left 使用了 CSS 计算函数 calc，应调整的是其内的 81px 中的 81 为别的数字以适应不同的论坛UI界面设计（本论坛是 81），调整数字时请确保 calc(50% - 81px) 里面的运算符号 - 左右两边都保留一个空格。

修改为代码显得略多一点，但它能让帖子在整体上居中，美感大大提升。

庶民

点赞。