爲什麼這個聊天室不會中心？

<div class="container chat" style="width: 50%; margin: 0px auto;"> 
    <div class="chat-bar"><h1>Wolf Valley Chat</h1></div> 
    <div class="chat-content"> 
     <table> 
      <tbody> 
       <script id="cid0020000091912718480" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 800px;height: 350px;">{"handle":"wolfvalleychat","arch":"js","styles":{"a":"202020","b":91,"c":"FFFFFF","d":"FFFFFF","f":91,"i":91,"k":"202020","l":"202020","m":"202020","n":"FFFFFF","o":91,"p":"10","q":"202020","r":91,"t":0,"surl":0,"allowpm":0,"cnrs":"0.35","fwtickm":1}}</script> 
      </tbody> 
     </table> 
    </div> 
</div>

這是我放在我的網站上的chatango chatbox的代碼。出於某種原因，它居中，但居中關閉。我該怎麼做才能糾正這個問題？爲什麼這個聊天室不會中心？

來源

2015-05-06 invadingdingo

你需要設置表的和iframe的寬度爲100％ –

好吧，我將寬度設置爲100％，但沒有它是完全偏向左邊 – invadingdingo

div.container需要保持你的問題有div.chat-content中的表格需要具有100％的寬度，因爲該表格內的iframe也是這樣 –

將最外面的格子的width設置爲100%，並製作tablemargin: 0 auto。下面是最終代碼：

<div class="container chat" style="width: 100%"> 
    <div class="chat-bar" style="text-align:center"><h1 style="color:white">Wolf Valley Chat</h1></div> 
    <div class="chat-content"> 
     <table style="margin: 0 auto"> 
      <tbody> 
       <script id="cid0020000091912718480" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 800px;height: 350px;">{"handle":"wolfvalleychat","arch":"js","styles":{"a":"202020","b":91,"c":"FFFFFF","d":"FFFFFF","f":91,"i":91,"k":"202020","l":"202020","m":"202020","n":"FFFFFF","o":91,"p":"10","q":"202020","r":91,"t":0,"surl":0,"allowpm":0,"cnrs":"0.35","fwtickm":1}}</script> 
      </tbody> 
     </table> 
    </div> 
</div>

來源

2015-05-06 16:54:10 Hybrid

太棒了！有效。它沒有在我的iPad上顯示，但我用我的電腦檢查過它，它正好在中心。在標題應該是的位置上方有一個小小的空白，但沒有顯示。我該怎麼做？ – invadingdingo

它看起來像文字顏色被設置爲黑色的標題，所以它與背景混合（這就是爲什麼你看不到它）。我更新了上面的代碼，使其顏色變爲白色，並添加了「text-align：center」，以便文本位於聊天框上方。 – Hybrid

好吧，這工作得很好！謝謝。 – invadingdingo

它在你的iframe的寬度的問題，你必須在800像素，當它應該是100％

<div class="container chat" style="width: 50%; margin: 0px auto;"> 
<div class="chat-bar"><h1>Wolf Valley Chat</h1></div> 
<div class="chat-content"> 
    <table style="width: 100%;"> 
     <tbody> 
      <script id="cid0020000091912718480" data-cfasync="false" 
async src="//st.chatango.com/js/gz/emb.js" 
style="width: 100%;height: 350px;"> 
{"handle":"wolfvalleychat","arch":"js","styles":{"a":"202020","b":91,"c":"FFFFFF","d":"FFFFFF","f":91,"i":91,"k":"202020","l":"202020","m":"202020","n":"FFFFFF","o":91,"p":"10","q":"202020","r":91,"t":0,"surl":0,"allowpm":0,"cnrs":"0.35","fwtickm":1}}</script> 
     </tbody> 
    </table> 
</div>

來源

2015-05-06 17:03:53

如果你想使用margin:0 auto爲中心，您必須定義 div的寬度才能居中。你可以修復類container chat的寬度。恩。

<div style="width: 800px; margin: 0px auto;" class="container chat">

來源

2015-05-06 17:08:08

爲什麼這個聊天室不會中心？

回答

相關問題