2

我发现我可以拥有一个或另一个，但似乎无法同时弄清楚两者。

我的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;
}

无论如何，如果我将 middleinner 的位置更改为相对而不是绝对，我就会以适当的溢出处理为代价进行垂直对齐。如果我将它设置为绝对值，我会以垂直对齐为代价进行适当的溢出处理。

有没有一种纯 CSS 的方式可以处理这个问题？

4

1 回答 1

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;
}

演示

要让它与动态高度元素一起使用，您必须使用一些 JavaScript，因为您使用的是 jQuery，我会使用它。也完全有可能使用 vanilla JS。

resize = function(el) {
    el.css({lineHeight: el.height() + "px"})
};
$(document).ready(function() {
    var $middle = $("#middle");
    resize($middle);
    $(window).on("resize", function() {
        resize($middle);
    })
})
于 2012-11-06T21:59:45.730 回答