WordPress经典编辑器中如何实现多个IFrame并排且水平居中

这是最简单且无冗余代码的方案，你无需修改原有iframe的任何属性，直接套用即可：

<div style="display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;">
  <!-- 把你原有4个iframe直接粘贴到这里即可 -->
  <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//ws-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=GB&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=*****anguage=en_GB&marketplace=amazon&region=GB&placement=*********5&show_border=true&link_opens_in_new_window=true"></iframe>
  <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="替换为第二个iframe地址"></iframe>
  <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="替换为第三个iframe地址"></iframe>
  <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="替换为第四个iframe地址"></iframe>
</div>

方案说明 #

• display: flex 开启flex布局，让子元素自动水平排列
• justify-content: center 实现所有iframe整体水平居中
• gap: 16px 控制iframe之间的横向间距，数值可按需调整
• flex-wrap: wrap 小屏幕宽度不足时自动折行，避免内容溢出，不需要折行可删除该属性
• 无需调用WordPress内置类，也无需额外添加主题自定义CSS，所有样式内联在容器标签中，经典编辑器文本模式下插入即可生效，没有浮动布局的清除问题，不会影响页面其他元素布局

如果你已经给所有iframe加上了class="alignleft"属性，可按以下方式调整实现居中：

<style>
.ad-container .alignleft {
  float: none;
  display: inline-block;
  margin: 0 8px 10px;
}
</style>
<div class="ad-container" style="text-align: center;">
  <!-- 把带alignleft类的4个iframe粘贴到这里 -->
</div>

该方案兼容性更强，但灵活度低于flex方案，不优先推荐。

1. 是否需要将所有iframe包裹在div容器中？
   需要，包裹统一容器是最低成本的实现方式，无需单独修改每个iframe的属性，后续调整布局也只需要修改容器的样式即可。
2. WordPress支持flexbox是否可以用？
   完全可以，也就是上面推荐的第一种方案，也是当前最优的实现方式，无需额外兼容处理。

内容的提问来源于stack exchange，提问作者Robin Andrews