只要你够狠
<p><iframe frameborder="0" scrolling="no" src="https://open.douyin.com/player/video?vid=7611700367511899401" style="width:960px;height:600px;"></iframe></p><p> </p>
<p> </p>
<p> </p>
<p> </p>
让 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) 里面的运算符号 - 左右两边都保留一个空格。
修改为代码显得略多一点，但它能让帖子在整体上居中，美感大大提升。
点赞。 感谢老师分享，制作辛苦了{:4_187:} 其实对家人不用那么狠那么决绝，该原谅还是要原谅的呢。做人需要很冷静和理智，但有时候也需要讲感情。
欣赏普陀申木老师的好帖{:4_187:}
页:
[1]