Question

我在容器中有一个iframe和一个div。他们两个需要垂直居中。看完桌子上的几个帖子到中心后，我试了一下，但无济于事。 iframe继续坚持左上边框，即使我将iframe'display'属性设置为'table-cell'＆amp; 'vertical-align'到'middle'。

HTML代码：

<!-- the container div -->
<div id="iframe_r_container">

<!-- iframe -->
            <iframe id="iframing" src="mannequin.html" frameborder="0" ></iframe>

<!--div-->      <div id="right_container">
                <div id="user_credit">
                    <h1><a href="#">Username</a></h1><br />
                     has <span id="credits">20,000</span> credits.
                </div>

                <div> <button id="template_button"><img src="images/Coutallure-WebApp/template_button.png" /><span>Templates</span></button> </div>
            </div>

这是CSS：

/* START OF IFRAME_R_CONTAINER */
#iframe_r_container {
    position: absolute;
    display: table;
    top: 48px;
    bottom: 38px;
    width: 960px;   
}

/* START OF IFRAME */
#iframing {
    display: table-cell;
    width: 640px;
    height: 480px;
    vertical-align: middle;
}
/* END OF IFRAME */


/* START OF RIGHT CONTAINER */
#right_container {
        display: table-cell;
        vertical-align: middle;
    width: 113px;
    margin: 20px;
}

今天我被困在这里半天，所以任何帮助都会非常感激。

Answer 1

为容器添加“height”应该这样做。只需将它添加到您的iframe容器中，就可以在Mac上为FF工作。

#iframe_r_container {
    position: absolute;
    top: 48px;
    bottom: 38px;
    width: 960px;
    height:480px;   
}

（注意：Internet Explorer 8（及更高版本）支持属性值“inline-table”，“run-in”，“table”，“table-caption”，“table-cell”，“table-column” ，“table-column-group”，“table-row”，“table-row-group”和“inherit”仅在指定了！DOCTYPE时才使用。）

Answer 2

我不确定你想要实现什么，但只是从阅读你的帖子 - 你不能尝试使用一些对齐属性来居中元素本身，这必须是其父元素的属性。您应该尝试这个保证金，我认为这是合适的财产。

Answer 3

如果你不介意使用其他技术而不是表格单元格中心，你可以尝试这样的事情：

#iframe_r_container {
    position: absolute;
    top: 48px;
    bottom: 38px;
    width: 960px;
}

/* START OF IFRAME */
#iframing {
    position: relative;
    top: 50%;
    margin-top: -240px;
    width: 640px;
    height: 480px;
    float: left;
}
/* END OF IFRAME */


/* START OF RIGHT CONTAINER */
#right_container {
    position: relative;
    top: 50%;
    height: 113px;
    margin-top: -57px;
    margin-left: 670px;
    width: 113px;

}

它可以在我的FF / mac上运行，但你必须在其他浏览器上测试它。

要使#right_container居中，你必须给它一个高度（这里是113px）并相应地设置负边距 - 顶部。

此外，您可能需要给#drame_r_container一个最小高度：640px，以避免iframe在其容器外溢出。

Answer 4

尝试以下设置：

/* START OF IFRAME_R_CONTAINER */
#iframe_r_container {
    position: absolute;
    top: 48px;
    bottom: 38px;
    width: 960px;   
}

/* START OF IFRAME */
#iframing {
    width: 640px;
    height: 480px;
    margin: 0 auto;
}
/* END OF IFRAME */


/* START OF RIGHT CONTAINER */
#right_container {
    vertical-align: middle;
    width: 113px;
    margin: 0 auto;
}

属性margin: 0 auto;将（希望）将iframe和其他div放在容器中心。未经测试但试一试。

垂直居中与表格

4 个答案: