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

とにかく、ミドルインナーの位置を絶対ではなく相対に変更すると、適切なオーバーフロー処理を犠牲にして垂直方向の配置が得られます。絶対に設定すると、垂直方向の配置を犠牲にして、適切なオーバーフロー処理が得られます。

これを処理できる純粋な 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 を使用しているので、それを使用します。これにもバニラ 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 に答える