我如何居中对齐嵌入式Soundcloud小部件？

Question

我使用了soundcloud的小部件API，并将小部件嵌入到我的HTML文件中，但我无法对齐它。

的HTML代码是

<iframe width="50%" height="300" scrolling="no" frameborder="no" align="middle" src="musiclink&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe> 

正如你可以看到我试过ALIGN =“中间”，但没有奏效。 我试着对齐=“左”，这工作，但由于某种原因对齐=“中”没有奏效。此外，我走进API代码，并试图改变CSS样式到

.widget { 
    background-position: center center; 
} 

但是，这并没有工作，要么

我在做什么错误/丢失？

Answer 1

您可以环绕的iframe有一个div：

<div style='text-align:center'> 
<iframe width="50%" height="300" scrolling="no" frameborder="no" align="center" src="musiclink&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe> 
</div> 

Answer 2

middle是valign的值。 改为使用align="center"。

更多valign：Here.

更多align：Here

Answer 3

把一个div周围的iframe，并设置左右边距为自动。它会将这个div放在它的容器中。

<div style='margin:0 auto;'> 
<iframe width="50%" height="300" scrolling="no" frameborder="no" align="center" src="musiclink&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe> 
</div>