Question

我需要显示视频，当用户按下菜单时，我需要将屏幕垂直划分为两半（彼此相邻），我需要在上半部分的中间（水平和垂直）显示文本，并且需要在下半部分显示一个列表（该列表也应该在水平和垂直的下半部分的中间）。我用flex创建了一个父div和2个子div，并通过javascript动态添加列表项。代码如下所示。

function displayMenu() {
  var mid = document.getElementById('mid');

  if (mid.classList.contains('hidden') == false) {
    mid.classList.toggle("hidden");
    return;
  }

  var ulid = document.getElementById('ulid');

  for (let index = 0; index < 3; index++) {
    let lItem = document.createElement('li');
    lItem.style.width = '100%';
    lItem.style.height = '150px';
    lItem.style.borderStyle = 'solid';
    lItem.style.borderWidth = '1px';

    let img = document.createElement("img");
    img.src = "img/TNT.png";
    lItem.appendChild(img);
    lItem.appendChild(document.createTextNode('FIRST'));
    ulid.appendChild(lItem);
  }

  mid.classList.toggle("hidden");
}

function changeChannel(e) {
  console.log('received keyEvent : ' + e.keyCode);
  let keyCode = e.keyCode;

  if (keyCode == 77) {
    displayMenu();
  }
}

document.addEventListener('keydown', changeChannel);

displayMenu();

<!DOCTYPE html>
<html>

<head>
  <script src='js/index.js'>
  </script>
  <style>
    html,
    body {
      height: 100%
    }
    
    #vid {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: -1;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
    }
    
    #mid {
      opacity: 0.5;
      display: flex;
      height: 100vmin;
      justify-content: stretch;
      flex-flow: row nowrap;
      z-index: 2;
    }
    
    #mid.hidden {
      display: none;
    }
    
    #mid1,
    #mid2 {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    
    #mid1 {
      background-color: rgba(255, 255, 255, 0.5);
    }
    
    #mid2 {
      background-color: rgba(255, 255, 255, 0.6);
    }
    
    #ulid {
      list-style-type: none;
      width: 100%;
      height: 150px;
    }
  </style>
</head>

<body>
  <video id='vid' src='textMotion.mp4' autoplay loop></video>
  <div id='mid' class='hidden'>
    <div id='mid1'>
      <h1>TEXT</h1>
    </div>
    <div id='mid2'>
      <ul id='ulid'></ul>
    </div>
  </div>
</body>

</html>

但是当我按照以下方式运行时，我遇到了多个问题。

整个列表在下半部分不会垂直和水平居中。
列表项目不是从下半场开始。
列表中的图像未显示在列表左侧。
项目上的文字不会垂直显示在列表的中心。

屏幕截图如下。

任何人都可以帮我解决这些问题吗？

Answer 1

正如评论中所指出的，如果没有图像，确切地知道你想要什么有点困难。但我认为这可能会使事情朝着正确的方向发展。

修复如下 1.向列表项添加一个类，并为其赋予flex属性，使其左对齐（justify-content: flex-start）和垂直居中（align-items: center）。 2.更新#mid1和#mid2元素的弹性属性以及align-self上的#mid1以使文本居中于该框中。

CSS更改

.list-item { 
  display:flex;
  align-items: center;
  justify-content: flex-start;
}

#mid1,
#mid2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
}

#mid1 {
  background-color: rgba(255, 255, 255, 0.5);
  align-self: center;
}

Javascript更改

for (let index = 0; index < 3; index++) {
  let lItem = document.createElement('li');
  lItem.style.width = '100%';
  lItem.style.height = '150px';
  lItem.style.borderStyle = 'solid';
  lItem.style.borderWidth = '1px';
  lItem.classList.add( "list-item" ); // Add a list-item class

  ...
 }

您可以在此处查看结果https://codepen.io/bunnymatic/pen/vjobQp。我从Google手中抓取了一张TNT图片作为占位符。

希望这有帮助

通过Javascript创建的列表项目未正确对齐

1 个答案: