文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么这个chatbox中心不行？

问为什么这个chatbox中心不行？
EN

Stack Overflow用户

提问于 2015-05-06 16:39:02

回答 3查看 455关注 0票数 0

<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>

这是我在我的网站上放置的聊天盒的代码。由于某种原因，它的中心，但中心是错的。我该怎么做才能纠正这个问题？

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-05-06 16:54:10

将最外层div的width设置为100%，并生成table margin: 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>

票数 2

Stack Overflow用户

发布于 2015-05-06 17:08:08

如果要使用margin:0 auto进行对中，则必须定义div的宽度，以便对事物进行居中。您可以修复container chat类的宽度。

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

票数 1

Stack Overflow用户

发布于 2015-05-06 17:03:53

问题在于你的iframe的宽度，当它是100%的时候，它的宽度是800 at

<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30082664

复制

相似问题

问为什么这个chatbox中心不行？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么这个chatbox中心不行？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么这个chatbox中心不行？
EN