如何居中对齐嵌入式 soundcloud 小部件？答案

【问题标题】：How do I center align an embedded soundcloud widget?如何居中对齐嵌入式 soundcloud 小部件？
【发布时间】：2015-08-19 06:36:32
【问题描述】：

我使用了来自 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="middle" 但它不起作用。我尝试了 align="left" 并且有效，但由于某种原因 align="middle" 不起作用。此外，我进入 API 代码并尝试将 CSS 样式更改为

.widget {
    background-position: center center;
}

但这也没用

我做错了什么/错过了什么？

【问题讨论】：

标签： html css widget soundcloud

【解决方案1】：

你可以用 div 包围 iframe：

<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>

【讨论】：

【解决方案2】：

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

更多关于valign：Here.

更多关于align：Here

【讨论】：

【解决方案3】：

在 iframe 周围放置一个 div 并将左右边距设置为自动。它将把这个 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>

【讨论】：