Question

我似乎无法理解这里发生了什么：

我想垂直居中一个iframe＆amp;另一个div，两者都将水平放置在一起。

我所做的是将上面两个（iframe和div）放在另一个名为'iframe_r_container'的div中，并将其定位为绝对＆amp;显示设置为表。

HTML：

<body id="container">

    <div id="menu_bars">
        <div id="main_bar">
            <ul>
                <li class="maintabs"><a href="#">a</a></li><li class="maintabs"><a href="#">b</a></li><li class="maintabs"><a href="#">c</a>
                </li><li class="maintabs"><a href="#">d</a></li>
            </ul>           
        </div>  

        <div id="filemenu">
            <ul>
                <li class="filetabs"><a href="#">File</a></li><li class="filetabs"><a href="#">Edit</a></li><li class="filetabs"><a href="#">Settings</a></li>
            </ul>
        </div>
    </div>

    <div id="iframe_r_container">
        <iframe id="iframing" src="mannequin.html" frameborder="0" ></iframe>

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

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

    <!-- contains the jquery widget for displaying the features, i.e. buttons, zips etc -->
            <div id="features_container">

            </div>
        </div>
    </div>  </body></html>

这是CSS：

/*  RESETS  */
html, body, div, span,
object, iframe, h1, h2, h3, h4, h5,
h6,  p, blockquote, pre, a, abbr,
address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong,
sub, sup, var, b, i,  dl, dt, dd, ol,
ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas,
details, figure, figcaption, hgroup,
menu, footer, header, nav, section,
summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Helvetica, 'Myriad Pro', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 10px;
    color: rgba(34,34,34,1);
}
a img {border: 0;} /* END OF RESET */

#container {
    width: 960px;
    height: 100%;
    background: rgba(255,255,255,0.8);
    margin: 0 auto; 
    position: relative;
}

#menu_bars {
    position: relative;
    width: 960px;
    margin: 0 auto;
}

/* START OF MAIN BAR */
#main_bar ul {
    float: left;
    width: 630px;
    height: 48px;
}

..........它一直在继续下面是我认为的问题区域

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

/* START OF IFRAME */
#iframing {
    display: table-column;
    width: 640px;
    height: 480px;
    margin: 10px auto;
}
/* END OF IFRAME */


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

#user_credit {
    font-size: 10px;
    text-transform: lowercase; 
    line-height: 8px;
    margin-bottom: 20px;
}

#user_credit h1 a {
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

#template_button {
    width: 130px;
    height: 28px;
    background: rgba(238,238,238,0.8);
    border: 1px solid rgba(0,0,0,0.2);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-left: -10px;
}

#template_button img {
    margin: 3px 6px 4px 0px;
}

#template_button span {
    vertical-align: 11px;
}

#feature_container {
    width: 300px;
    height: auto;
    display: inline-block;
}

/* END OF RIGHT CONTAINER */
/*END OF IFRAME_R_CONTAINER */

Answer 1

我会调查一下： - http://www.quirksmode.org/css/display.html

我从未听说过表格栏。

CSS - 垂直居中

1 个答案: