Question

因此，我尝试将此视频垂直和水平地与视频下方的某些文字对齐。我目前的代码可以在下面找到

<head>
        <script src="https://www.youtube.com/iframe_api"></script>
</head>
<body style="background-color: black;">
        <div id="background" style="z-index: -1; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: black; background-image: url('./xyz.jpg');"></div>
        <div align="center">
                <div style="display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; height: 100%; align-items: center; justify-content: center;">
                        <div id="player"></div>
                        <div style="display: block; color: white;">I am text?!?!</div>
                </div>
        </div>
        <script type="text/javascript">
                var player;
                function onYouTubeIframeAPIReady() {
                        player = new YT.Player('player', {
                                videoId: 'dQw4w9WgXcQ',
                                playerVars: {
                                        controls: 0,
                                        autoplay: 1,
                                        disablekb: 1,
                                        enablejsapi: 1,
                                        iv_load_policy: 3,
                                        modestbranding: 1,
                                        showinfo: 0,
                                        rel: 0
                                }
                        });
                }
        </script>
</body>

我确定我只是遗漏了一些小东西，但在使用flex来对齐它们时，我似乎无法将文本强制换行。

我尝试了显而易见的<br>并将儿童的显示设置为阻止，但我现在处于死路。

任何帮助都会很棒

Answer 1

默认情况下，flex用作行。您似乎希望将您的内容放在专栏中。

尝试将flex-direction: column添加到您的Flex样式div：

<div style="display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; height: 100%; align-items: center; justify-content: center; flex-direction: column;">
  <div id="player"></div>
  <div style="display: block; color: white;">I am text?!?!</div>
</div>

Answer 2

您需要为其添加CSS属性flex-direction:column以便将其中一个对齐。

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    videoId: 'dQw4w9WgXcQ',
    playerVars: {
      controls: 0,
      autoplay: 1,
      disablekb: 1,
      enablejsapi: 1,
      iv_load_policy: 3,
      modestbranding: 1,
      showinfo: 0,
      rel: 0
    }
  });
}

.cont {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.background {
  z-index: -1;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: black;
  background-image: url('./xyz.jpg');
}

.test {
  display: block;
  color: white;
}

<head>
  <script src="https://www.youtube.com/iframe_api"></script>
</head>

<body style="background-color: black;">
  <div id="background" class="background"></div>
  <div align="center">
    <div class="cont">
      <div id="player"></div>
      <div class="test">I am text?!?!</div>
    </div>
  </div>
</body>

display flex禁用新行

2 个答案: