display flex禁用新行

因此，我試圖將此視頻垂直和水平地與視頻下方的一些文本對齊。我當前的代碼可以在下面display flex禁用新行

<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>

我敢肯定，我只是失去了一些東西小中找到，但我似乎無法將文本強行推上了一個新線，而使用柔性對準他們。

我試過了顯而易見的<br>，並設置了孩子的屏幕，但我現在處於死衚衕。

任何幫助將是驚人的

來源

2017-09-27 Alex Ng

您需要添加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>

來源

2017-09-27 19:30:41

感謝這麼多的人。知道這是簡單的事情 –

默認情況下，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>

來源

2017-09-27 19:29:26

display flex禁用新行

回答

相關問題