Блог

Я пытаюсь расположить несколько элементов в центрированном столбце внутри лайтбокса Featherlight. Похоже, что CSS Flexbox перезаписывается чем-то в CSS лайтбокса, поэтому он отказывается работать. Все просто помещается в положение по умолчанию слева от лайтбокса.

Flex зачеркивание:

Я все еще новичок в 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>
  

добавить перенос в лайтбокс 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>