代码之家 › 专栏 › 技术社区 › kadina

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

html5 css javascript

1

kadina · 技术社区 · 6 年前

当用户启动应用程序时,我需要全屏显示视频,当用户按“M”时,视频分区大小应该减小,并且需要在视频下显示一个分区,在分区内显示文本。文本应该在分区内水平和垂直对齐。我使用了display:table cell,但是T不起作用。下面是代码。

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录制”文本是水平居中的,但它不是垂直居中的。

下面是截图。

有人能帮我解决这个问题吗?

2 回复 | 直到 6 年前

1

0

Bad Hombre 6 年前

尝试使用flexbox而不是table cell,

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

所以只需添加这些并删除 display: table-cell 把一切从 #htxtdiv 除了颜色

2

0

kadina 6 年前

解决了这个问题。身高:百分之一百是hdiv的罪魁祸首。hdiv不是从0开始的。从顶部开始:300像素。所以身高不应该是100%。它应该设置为window.innerHeight-300。我通过javascript设置高度。一旦我们设置了这样的高度,表单元方法或flex-box方法都可以正常工作。