Question

我发现我可以拥有一个或另一个，但似乎无法弄明白两者。

我的HTML如下：

<div id="middle">
    <div id="middleinner"></div>
</div>

CSS有点像这样（z-indexes设置为页面上的其他东西，因为它不相关而留在这里，加上有一些注释掉的东西，因为我试图弄清楚，因为我去了）：

html, body{
        font-family: helvetica, sans-serif;
        font-size: 1em;
        height: 100%;
        overflow: hidden;
}

#middle{
/*      display: table;*/
        display: table;
        height: 80%;
        width: 90%;
/*      position: fixed;*/
        position: absolute;
        top: 10%;
        left: 5%;
        right: 95%;
        bottom: 90%;
        color: #000;
        z-index: 0;
}

#middleinner{
        padding: 0.5em 1em 0.5em 1em;
        background-color: #F9F9F9;
        display: table-cell;
/*      display: inline-block;*/
        border-radius: 1.5em;
        vertical-align: middle;
/*      margin-left: auto;
        margin-right: auto;*/
        text-align: center;
/*      position: relative;*/
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: auto;
        z-index: 20;
}

无论如何，如果我将中间人的位置改为亲戚而不是绝对，我会以正确的溢出处理为代价进行垂直对齐。如果我将它设置为绝对值，我会以垂直对齐为代价进行适当的溢出处理。

我能用这种纯CSS方法吗？

Answer 1

是的，line-height，inline-block和vertical-align的组合可以做到。

#middle {
    width: 80%;
    margin: 10px auto;
    border: 1px dashed black;
    height: 500px;
    line-height: 500px;
    vertical-align: middle;
    text-align: center;
}
#inner {
    height: 50px;
    width: 80%;
    overflow: auto;
    display: inline-block;
    line-height: 1.1em;
}

<强> Demo

要让它使用动态高度元素，你必须使用一些JavaScript，因为你使用的是jQuery，我会继续使用它。完全可以使用香草JS这个。

resize = function(el) {
    el.css({lineHeight: el.height() + "px"})
};
$(document).ready(function() {
    var $middle = $("#middle");
    resize($middle);
    $(window).on("resize", function() {
        resize($middle);
    })
})

垂直对齐div和正确的滚动溢出，这可能吗？

1 个答案: