中心屏幕上的物體移除一個iframe

我有一箇中心p，我用它來握住我的嵌入式實時流對象，像這樣中心屏幕上的物體移除一個iframe

Unhidden chat

用於聊天的iframe現在以後，我有一個JQuery調用隱藏聊天， <a id="hidechat" onClick="$('#chat_embed').hide();" href="#">[Hide Chat]</a>

但是，隨着流盒最終被拉斷的方式向左側 Hidden chat

我很想讓聊天在屏幕中心重新對齊，而沒有右側的醜陋框。我試過設置一個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&amp;popout_chat=true" height="378" width="350"></iframe>

來源

2012-07-16 David B

無論是'object'和'iframe'標籤有固定的尺寸。 CSS可能會有幫助。有沒有機會看到你的代碼在行動？ – approxiblue 2012-07-16 03:24:20

當然，您可以在[tronasaurus.com]（http://www.tronasaurus.com/） – 2012-07-16 03:24:57

查看它。只需將'text-align：center'添加到'p.streamblock'。另外，考慮將您的顯示/隱藏鏈接的href更改爲javascript：void（0）;'。詳情在這裏：http://stackoverflow.com/questions/134845/href-tag-for-javascript-links-or-javascriptvoid0。 – approxiblue 2012-07-16 03:53:40

新的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&amp;channel=tronasaurusx&amp;auto_play=true&amp;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&amp;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並在飛行中進行這些更改。上面的（當正如我所給出的那樣使用時）將產生期望的結果。

來源

2012-07-16 03:34:14 Ohgodwhy

工作很好，謝謝。我正在犯的重大錯誤是什麼？ – 2012-07-16 13:34:35

需要一個容器來對齊內容;使用P，你不能對齊一個「對象」 – Ohgodwhy 2012-07-16 13:51:27

嘿，現在你可以這樣做，因爲這樣

.streamblock > a{ 
float:right; 
margin-right:xx; // required to your design 
}

來源

2012-07-16 04:43:35

中心屏幕上的物體移除一個iframe

回答

相關問題