0

私はライトボックスに取り組んでいます。コンテンツに基づいて動的にサイズを変更する必要があります。しかし、画面の中央に配置する必要もあります。私はこのようなことを試みています:

HTML:

<div class="lightbox-background">
    <div class="lightbox">
        LIGHTBOX CONTENT
    </div>
</div>

CSS:

.lightbox-background {
    background-color: rgba(0,0,0,0.9);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
}

.lightbox {
    background-color: white;
    width: 780px;
    z-index: 100;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: auto !important;
    max-height: 90%;
}

私はそれを機能させることができませんでした。可能であれば、JS の使用は避けたいと思います。どうすればいいですか？

4

2 に答える 2

1

親コンテナーvertical-align: middleのセレクターと同様に作業できます。:before私のフィドルをチェックしてください：

http://jsfiddle.net/GA5K3/2/

于 2013-11-04T17:22:55.883 に答える