ディスプレイflexは新しい行を無効にします

私はこのビデオをビデオの下にテキストで縦横に整列しようとしています。私の現在のコードは、私は、私はちょうど小さな何かが欠けていますが、私はそれらを揃えるためにフレックスを使用しながら、新しい行にテキストを強制的に見えることはできません確信しているディスプレイ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>を試してみましたが、子供のディスプレイをブロックするように設定しましたが、今は終わりです。

すべてのヘルプは、デフォルトでは行としてflex機能

出典

2017-09-27 Alex Ng

あなたはそれが別の下の1を整列させるための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

本当にありがとうございました男。それが何か単純だと分かっていた –

素晴らしいだろう。あなたはあなたのコンテンツを列に入れたいと思っています。あなたのフレックススタイルのdivにflex-direction: columnを追加

試してみてください。

<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

ディスプレイflexは新しい行を無効にします

答えて

関連する問題