我有一个居中的p
,用于容纳嵌入式实时流对象和用于聊天的iframe,如下所示
现在,我有一个JQuery
通话隐藏了聊天记录,<a id="hidechat" onClick="$('#chat_embed').hide();" href="#">[Hide Chat]</a>
但这最终将流框拉到左侧
我很想让聊天在屏幕的中央重新对齐,而右边没有难看的框。我试过设置float: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>
最佳答案
新的HTML标记->
<div class="streamblock">
<!-- Twitch.tv embed code -->
<a href="#" onclick="$('#chat_embed').show();$('#showchat').hide();$('#hidechat').show();" id="showchat" style="display: inline;">[Show Chat]</a>
<a href="#" onclick="$('#chat_embed').hide();$('#hidechat').hide();$('#showchat').show();" id="hidechat" style="display: none;">[Hide Chat]</a><br>
<p class="objContainer">
<object width="620" height="378" style="margin: 0px auto;" type="application/x-shockwave-flash" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=tronasaurusx" bgcolor="#000000">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<param name="allowNetworking" value="all">
<param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf">
<param name="flashvars" value="hostname=www.twitch.tv&channel=tronasaurusx&auto_play=true&start_volume=25">
</object>
<!-- End Twitch.tv embed code -->
<!-- Twitch.tv chat code -->
<iframe width="350" scrolling="no" height="378" frameborder="0" style="display: none;" id="chat_embed" src="http://twitch.tv/chat/embed?channel=tronasaurusx&popout_chat=true"></iframe>
<br>
<!-- End Twitch.tv chat code -->
</p>
</div>
新的CSS标记->
div.streamblock{
margin: 0px auto;
text-align: center;
max-width:1100px;
}
p{
background-color: #121212;
color: #FFFFFF;
font-family: "Palatino Linotype",Tahoma,Serif;
margin-bottom: 1%;
margin-left: auto;
margin-right: auto;
max-height: 75%;
padding: 25px;
text-indent: 10px;
}
我使用控制台来编辑HTML并即时进行这些更改。上面的(当我完全按照我给的方式使用时)将产生期望的结果。
关于jquery - 移除iframe后,将对象在屏幕上居中放置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11497740/