Flexbox CSS funktioniert nicht in Featherlight Light Box. Wie sonst kann ich Elemente in der Lightbox positionieren oder Flexbox reparieren?

Question

Ich versuche, mehrere Elemente in einer zentrierten Spalte innerhalb einer Featherlight Lightbox zu positionieren. Flexbox CSS scheint von etwas im CSS des Leuchtkastens überschrieben zu werden, so dass es nicht funktioniert. Alles wird nur in der Standardposition links neben dem Leuchtkasten platziert.

Flex gestrichener:

Ich bin noch neu in CSS, spielen so mit Margen und Polsterung ist nicht für mich arbeiten gut. Entweder gelingt es mir, die Elemente zu zentrieren, und auf jeder Seite gibt es überschüssigen weißen Raum, oder sie positionieren sich überhaupt nicht richtig.

Ist es möglich, flexbox zu reparieren/zu zwingen? Sonst was für andere Styling-Optionen habe ich.

CSS:

<style> 

    .logo{ 

    margin:auto; 
    width:72px; 
    height:72px; 

    } 
    .teamname{ 

    margin:auto; 
    font-family: Arial, Helvetica, sans-serif; 
    } 
    .suburb{ 

    margin:auto; 
    font-family: Arial, Helvetica, sans-serif; 
    } 
    .teaminfohead{ 

    margin:auto; 
    font-family: Arial, Helvetica, sans-serif; 
    } 
    .teaminfo{ 

    margin:auto; 
    font-family: Arial, Helvetica, sans-serif; 
    } 
    .teamphoto{ 

    margin:auto; 

    } 


    .lightbox { 
    display: none; 

    } 

    .lightbox_active { 
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
    font-family: Arial, Helvetica, sans-serif; 
    border-style: solid; 
    border-width: 2px; 
    border-color: black; 

    } 



    </style> 

HTML:

<a href="#" data-featherlight="#fl1"data-featherlight-variant="lightbox_active">Open element in lightbox</a> 
    <div class='lightbox' id='fl1'> 

      <img class='logo' id='logo' src="images/PBS.png"> 
      <h1 class='teamname' id='teamname'></h1> 
      <h2 class='suburb' id='suburb'></h2> 
      <h3 class='teaminfohead' id='teaminfohead'></h3> 
      <p class='teaminfo' id='teaminfo'></p> 
      <img class='teamphoto'id="teamphoto" src="images/PBSteam.png"> 

    </div> 

Answer 1

add wickeln in div Leuchtkasten

.lightbox { display: none } 
 
.lightbox__wrap { 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class='lightbox' id='fl1'> 
 
<div class="lightbox__wrap"> 
 
    <img class='logo' id='logo' src="images/PBS.png"> 
 
    <h1 class='teamname' id='teamname'>ABC</h1> 
 
    <h2 class='suburb' id='suburb'>CFG</h2> 
 
    <h3 class='teaminfohead' id='teaminfohead'>jlasj dlak</h3> 
 
    <p class='teaminfo' id='teaminfo'>j laskdj ald</p> 
 
    <img class='teamphoto'id="teamphoto" src="images/PBSteam.png"> 
 
</div> 
 
</div> 
 

 

 
<a href="#" data-featherlight="#fl1"data-featherlight-variant="lightbox_active">Open element in lightbox</a>