Flexbox CSSは、Featherlightライトボックスでは機能しません。ライトボックス内の要素を配置する方法や、Flexboxを修正する方法はありますか？

Question

私は、Featherlightライトボックス内の中心の列に複数の要素を配置しようとしています。 Flexbox CSSは、ライトボックスのCSSで何かで上書きされているように見えるので、動作しません。すべてがライトボックスの左側のデフォルトの位置に置かれています。

フレックス取り消し線：

私は余白とパディングと一緒に遊んで、CSSにまだ新しいですがよく私にのために働いていません。私は要素を中央に置くことができ、両側に余分な空白があるか、または正しく配置されません。

flexboxを動作させることはできますか？そうでなければ、他にどんなスタイリングオプションがありますか？

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

のdivをライトボックスへ

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

をラップを追加