如何居中一个facebook iframe按钮

How to center a facebook iframe like button

本文关键字：一个 facebook iframe 按钮 何居中      更新时间：2023-09-26

我需要一个全局解决方案来中心一个facebook iframe按钮，它可以有不同的url和不同的区域设置(和语言-在我的情况下40+)。所以最后按钮的宽度会有所不同。

据此，我删除了width属性并添加了locale参数。iframe的宽度是300px，不能居中。

看这个例子中的问题:

.mydiv {
  padding: 30px 0;
  background: red;
  text-align: center;
}
.mydiv span {
  font-family: sans-serif;
  text-decoration: underline;
  display: block;
  margin-bottom: 10px;
}
.mydiv iframe {
  background: green;
}
<div class="mydiv">
  <span>locale en_US</span>
  <iframe src="https://www.facebook.com/plugins/like.php?locale=en_US&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&action=like&size=small&show_faces=true&share=false&height=21&appId=848263035268773" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  <span>locale de_DE</span>
  <iframe src="https://www.facebook.com/plugins/like.php?locale=de_DE&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&action=like&size=small&show_faces=true&share=false&height=21&appId=848263035268773" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>

重要的是这里:我必须使用iframe解决方案的facebook喜欢按钮，而不是js sdk版本。

.mydiv {
  padding: 30px 0;
  background: red;
  text-align:center;
}

添加text-align:center到您的包含div

相关文章：