CSS - Vertically centering
I cannot seem to comprehend what's going on here:
I want to vertically center an iframe & another div, both of which will sit alongside each other horizontally.
What I have done is that I have placed the above two (iframe and div) inside another div called 'iframe_r_container' and positioned it as absolute & display set as table.
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>
Here is the 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;
}
.......... it goes on and on AND BELOW IS THE PROBLEM AREA I THINK
/* 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 */
I would look into this: - http://www.quirksmode.org/css/display.html
I have never heard of table-column.
加载中,请稍侯......
精彩评论