Display Table cell i position Absolute

Question

Witam. Chce zrobic tekst na filmie ktory bedzie zajmowac jedynie czesc ekranu. Chce osiagnac to co osiagnalbym normalnie ale po dodaniu position  absolute. Wiem ze aby wycentrowac position: absolute nalezy zrobic margin: auto; left:0; right:0; 

Jest cos takiego dla display table?

Szukam czegos responzywnego wiec nie bardzo zadziala margin-top: 50px; a margin top teraz dziala ale tylko do pewnego stopnia.

SASS odpowiedzialny za header

header {
    background: url("../Assets/Images/bg1.jpg");
    //height: 0vh;
    //display: table;
    width: 100%;
    position: relative;
    h1 {
      position: absolute;
      height: 10vh;
      //margin-top: 50vh;
      margin: 10% auto 0 auto;
      left: 0;
      right: 0;
      color: #177DDF;
      //display: table-cell;
      //vertical-align: middle;
    }
    iframe{
      width: 60vw;
      height: 30vw; /* 100/56.25 = 560/315 = 1.778 */
      margin: 0 auto 0 auto;
      display: block;
    }

HTML

<header>
    <h1>3B Solutions</h1>
    <iframe src="https://www.youtube.com/embed/ST56ATKfgfs"  allowfullscreen></iframe>
</header>

 

Answer 1

Alex,

position absolute, to dobre rozwiązanie, jeśli height tabeli będzie jedynie zależny od video.

Potrzebujesz jedynie wycentrować pozycję nagłówka względem tabeli za pomocą left i top 50% redukując jego wysokość i szerokość np. właściwością translate -50% oraz wycentrować text względem nagłówka za pomocą text-align center.

cały kod: https://codepen.io/anon/pen/OmjgwP?editors=1100

Comments

O w morde. Dzieki!

---

w porządku stary, polecam się! :)