Question

我正在创建一个我的Twitch流将要去的页面，但我无法横向居中。每当我查一下，答案就是：

<div style="text-align:center">
<iframe></iframe>
</div>

但这对我不起作用。 iframe似乎只是浮动在所有内容之上，偏离中心。它应该伸出黑色条，这是mainArea，向下推下脚，它是它下面的灰色条。相反，它会忽略所有内容，让页面像橡皮筋一样快速回弹。

这是屏幕截图的链接，因为SO不会让我直接发布图片...

http://imgur.com/YX2Oc46

这是HTML，它是层次结构中正文下的一步：

<div id="mainArea">
            <div class="container page">
                <div style="text-align: center">
                    <iframe id="player" src="http://www.twitch.tv/twitchusername/embed" frameborder="0" scrolling="no" height="480" width="853"></iframe>
                </div>
            </div>
        </div>

以防万一，容器类CSS：

    .container{
    background-color: #111111;
    width: 1200px;
    height: auto;
    margin: 0 auto;
}

和页面类CSS：

    .page{
    background-color: #111111;
    padding: 20px;
    padding-bottom: 1px;
    color:white;

}

提前致谢，千斤顶

Answer 1

iframe是块元素，因此请使用

iframe {margin: auto}

Answer 2

将margin: auto提交给<iframe>：

iframe {margin: auto;}

或者只是给display: inline-block;：

iframe {display: inline-block;}

如何将我的iframe居中？

2 个答案: