首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Div未在另一个div中垂直对齐显示

Div未在另一个div中垂直对齐显示
EN

Stack Overflow用户
提问于 2018-06-03 09:29:36
回答 2查看 56关注 0票数 1

我需要显示视频全屏时,用户启动的应用程序,当用户按下'm',视频div的大小应该减少,并需要显示一个div下的视频和内部的div的文本。文本应该在div内水平和垂直对齐。我使用了display: table-cell,但它不工作。下面是代码。

HTML:

代码语言:javascript
复制
<!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:

代码语言: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录制”文本是水平居中的,它也不是垂直居中的。

下面是截图。

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-04 02:04:45

弄清楚了问题所在。hdiv中的“'height: 100%”是罪魁祸首。hdiv不是从top: 0开始。它是从顶部开始的: 300px。所以高度不应该是100%。应将其设置为window.innerHeight - 300。我通过javascript设置了高度。一旦我们像这样设置了高度,表格单元格方法或弹性框方法都应该可以很好地工作。

票数 0
EN

Stack Overflow用户

发布于 2018-06-03 12:13:55

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

代码语言:javascript
复制
#hdiv {
  display: flex;
  align-items: center;
  justify-content: center;
}

因此,只需添加这些内容并删除display: table-cell,并从#htxtdiv中删除除颜色之外的所有内容

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50662553

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档