|
|
让 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) 里面的运算符号 - 左右两边都保留一个空格。
修改为代码显得略多一点,但它能让帖子在整体上居中,美感大大提升。
|
|