我有一个居中p
的东西,我用它来保存我的嵌入式实时流对象和一个用于聊天的 iframe,就像这样
现在,我有一个JQuery
隐藏聊天的电话,
<a id="hidechat" onClick="$('#chat_embed').hide();" href="#">[Hide Chat]</a>
但这最终导致流盒被拉到左边
我希望聊天在屏幕中央重新对齐,而右侧没有丑陋的框。我试过设置 afloat:left;
但是它下面的文本会环绕并且通常会破坏整个布局。
我目前的布局可以做到这一点吗?
CSS:
p
{
margin-left:auto;
margin-right:auto;
margin-bottom:1%;
background-color:#121212;
max-width:53%;
max-height:75%;
padding-top:25px;
padding-left:25px;
padding-right:25px;
padding-bottom:25px;
}
p.streamblock
{
padding-top:25px;
padding-left:25px;
padding-right:25px;
padding-bottom:25px;
max-width:1000px;
}
嵌入代码:
<object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=mychannel" bgcolor="#000000">
<param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
<param name="flashvars" value="hostname=www.twitch.tv&channel=mychannel&auto_play=true&start_volume=25" />
</object>
<iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=tronasaurusx&popout_chat=true" height="378" width="350"></iframe>