我需要容器宽度最小高度来容纳可变大小的内容,但同时我需要内容在父容器内垂直对齐。
JS fiddle : http://jsfiddle.net/mr_goodcat/n5Pq3/6/
HTML:
<table class="mainLayout">
<tr>
<td>
<div class="contentLayout">
<div class="tbl">
<div class="tcell">
<div class="inner">
CONTENT
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
BOTTOM
</td>
</tr>
</table>
CSS:
body, html {
background-color: lightgreen;
height: 100%;
width: 100%;
}
.mainLayout {
height: 100%;
width: 100%;
}
.contentLayout {
width: 100%;
min-height: 200px;
border: 1px solid red;
display: block;
}
.tbl {
height: 100%;
width: 100%;
display: table;
}
.tcell {
width: 100%;
height: 100%;
background: purple;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.inner {
display: inline-block;
}
想要在红色方 block (最小高度容器)内对齐紫色框。我该怎么做?
最佳答案
试试这个 http://jsfiddle.net/n5Pq3/30/这是 webkit 的一个已知问题。解决方法是使用
position:relative; //on parent
position:absolute; // on child
想要查看更多详细信息,请点击此链接... https://bugs.webkit.org/show_bug.cgi?id=26559
关于css - 制作div(显示: table) match outer container's height width min-height,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14022999/