Question

我需要在用户启动应用程序时全屏显示视频，当用户按下'm'时，应减少视频div大小，并且需要在div内的视频和文本下显示div。文本应在div内水平和垂直对齐。我用display：table-cell但是没用。以下是代码。

HTML：

<!DOCTYPE html>
    <html>
        <head>
            <title>VOD</title>
            <script src='js/index.js'></script>
            <style>
                html, body
                {
                    height:100%;
                    width: 100%;
                    overflow: hidden;
                    background-color: #2F4F4F;
                }

                #header {
                    position: fixed;
                    left: 0px;
                    top: 0px;
                    width: 100%;
                    height: 75px;
                    background-color: black;
                    color: white;
                    padding-left: 75px;
                    font-family: sans-serif;
                }

                #hdiv {
                    position: fixed;
                    left: 75px;
                    top: 300px;
                    height: 100%;
                    width: 376px;
                    display: table;
                    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7), inset -7px 0 9px -7px rgba(0,0,0,0.7);
                }

                #htxtdiv {
                    width: 100%;
                    height: 50px;
                    color: white;
                    font-family: sans-serif;
                    display: table-cell;
                    vertical-align: middle;
                    text-align: center;
                }

                #vid.full {
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    z-index: 3;
                    min-width: 100%;
                    min-height: 100%;
                    width: auto;
                    height: auto;
                    transform: translate(-50%, -50%);
                }

                #vid.pip {
                    position: fixed;
                    left: 75px;
                    top: 75px;
                    width: 376px;
                    height: 205px;
                    background-color:black;
                    border-left: 1px solid #b5b5b5;
                    border-right: 1px solid #b5b5b5;
                    border-bottom: 1px solid #b5b5b5;
                    z-index: 3;
                }
            </style>
        </head>
        <body>
            <div id='maindiv' style='display:none'>
                <div id='header'>
                    <h2>DVR</h2>
                </div>
                <div id='hdiv'>
                    <div id='htxtdiv'>
                        <h3>Cloud DVR Recordings</h3>
                    </div>
                </div>
            </div>
            <video id='vid' src='textMotion.mp4'class='full' autoplay></video>
        </body>
    </html>

使用Javascript：

function displayMenu() {
    // If already menu is visible, hide it
    let vid = document.getElementById('vid');
    let mdiv = document.getElementById('maindiv');

    if(vid.classList.contains('pip') == true) {
        mdiv.style.display = 'none';
        vid.classList.add('full');
        vid.classList.remove('pip');
        return;
    }

    mdiv.style.display = 'block';
    vid.classList.add('pip');
    vid.classList.remove('full');
}

function processKeyPress(e) {
    console.log('received keyEvent : ' + e.keyCode);
    let keyCode = e.keyCode;

    // Menu button or key 'm'
    if((keyCode == 77) || (keyCode == 462)) {
        displayMenu();
    }
}

document.addEventListener('keydown', processKeyPress);

我正在使用'display：table'作为外部div（hdiv）和'display：table-cell'作为内部div（htxtdiv）。即使“云DVR录制”文本是水平居中的，它也不是垂直居中的。

下面是截图。

有人可以帮我解决这个问题吗？

Answer 1

尝试使用flexbox而不是table-cell，

#hdiv {
  display: flex;
  align-items: center;
  justify-content: center;
}

所以只需添加这些内容并移除display: table-cell并删除#htxtdiv以外的所有内容

Answer 2

找出问题所在。＆＃39;身高：100％＆＃39;在hdiv是罪魁祸首。 hdiv不是从顶部开始：0。从顶部开始：300px。所以身高不应该是100％。它应该设置为window.innerHeight - 300.我通过javascript设置高度。一旦我们像这样设置高度，表格单元方法或弹性框方法应该可以正常工作。

Div不在另一个div内垂直对齐显示

2 个答案: