Div未在另一个div中垂直对齐显示
Div未在另一个div中垂直对齐显示
提问于 2018-06-03 09:29:36
我需要显示视频全屏时，用户启动的应用程序，当用户按下'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录制”文本是水平居中的，它也不是垂直居中的。
下面是截图。
有人能帮我解决这个问题吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-04 02:04:45
弄清楚了问题所在。hdiv中的“'height: 100%”是罪魁祸首。hdiv不是从top: 0开始。它是从顶部开始的: 300px。所以高度不应该是100%。应将其设置为window.innerHeight - 300。我通过javascript设置了高度。一旦我们像这样设置了高度，表格单元格方法或弹性框方法都应该可以很好地工作。
Stack Overflow用户
发布于 2018-06-03 12:13:55
尝试使用flexbox而不是table-cell，
#hdiv {
display: flex;
align-items: center;
justify-content: center;
}因此，只需添加这些内容并删除display: table-cell，并从#htxtdiv中删除除颜色之外的所有内容
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50662553
复制相关文章
相似问题
腾讯云开发者
