display flex deaktiviert neue Zeilen

Also versuche ich dieses Video vertikal und horizontal mit etwas Text unter dem Video auszurichten. Mein aktueller Code kann unterdisplay flex deaktiviert neue Zeilen

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

Ich bin sicher gefunden werden Ich bin fehlt nur etwas klein, aber ich kann den Text nicht auf eine neue Linie zu zwingen scheinen, während die flex mit ihnen auszurichten.

Ich habe versucht, die offensichtliche <br> und Einstellung der Kinder-Display zu blockieren, aber ich bin gerade in einer Sackgasse.

Jede Hilfe wäre

Quelle

2017-09-27 Alex Ng

Sie benötigen flex-direction:column die CSS-Eigenschaft hinzufügen für sie untereinander auszurichten.

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>

Quelle

2017-09-27 19:30:41

Vielen Dank Mann. Wusste, es war etwas Einfaches –

standardmäßig flex Funktionen als eine Reihe erstaunlich. Sie scheinen Ihren Inhalt in einer Spalte zu haben.

Try flex-direction: column auf Ihre flex-Stil div Zusatz:

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

Quelle

2017-09-27 19:29:26

display flex deaktiviert neue Zeilen

Antwort

Verwandte Themen