Question

我需要一个全局解决方案来集中facebook iframe像按钮，它可以有不同的网址和不同的区域设置（以及语言 - 在我的情况下为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>

重要的是：我必须使用facebook喜欢按钮的iframe，而不是js sdk版本。

Answer 1

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

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

如何将facebook iframe像按钮一样居中

1 个答案: