WordPress中使用div居中Muses收音机播放器始终左对齐问题求助

你当前代码的问题在于，外层div设置的width:800px; margin:0 auto仅实现了这个800px宽度容器自身的水平居中，而容器内渲染出的220px宽度的Muses播放器默认左对齐，因此视觉上播放器整体仍然靠左。

方案1：保留800px外层容器宽度 #

给外层div新增text-align: center属性，让容器内部的播放器元素居中显示，修改后代码如下：

<div style="width:800px; margin:0 auto; text-align:center;">
<!-- BEGINS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->
<script type="text/javascript" src="https://hosted.muses.org/mrp.js"></script>
<script type="text/javascript">
MRP.insert({
'url':'https://reclaimedradio.radioca.st/;',
'codec':'mp3',
'volume':70,
'autoplay':false,
'jsevents':true,
'buffering':0,
'title':'Reclaimed Radio',
'wmode':'transparent',
'skin':'radiovoz',
'width':220,
'height':69
});
</script>
<!-- ENDS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->
</div>

方案2：外层容器宽度匹配播放器宽度 #

直接把外层div的宽度设置为和播放器一致的220px，即可实现播放器直接居中，无需额外对齐属性：

<div style="width:220px; margin:0 auto;">
<!-- BEGINS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->
<script type="text/javascript" src="https://hosted.muses.org/mrp.js"></script>
<script type="text/javascript">
MRP.insert({
'url':'https://reclaimedradio.radioca.st/;',
'codec':'mp3',
'volume':70,
'autoplay':false,
'jsevents':true,
'buffering':0,
'title':'Reclaimed Radio',
'wmode':'transparent',
'skin':'radiovoz',
'width':220,
'height':69
});
</script>
<!-- ENDS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->
</div>

排查补充 #

如果上述方案均不生效，可检查站点全局CSS是否存在对div、iframe或动态生成元素的强制对齐、浮动类样式覆盖，你可以给外层div添加唯一id，编写更高优先级的CSS规则即可规避全局样式影响。

内容的提问来源于stack exchange，提问作者Kyle Rickards