Как выровнять по вертикали карту наложения изображений в Bootstrap 4? - PullRequest
Новая
       21

Как выровнять по вертикали карту наложения изображений в Bootstrap 4?

0 голосов
/ 07 мая 2019

Я пытаюсь расположить значок FontAwesome по центру карты наложения изображений и не могу расположить ее вертикально по центру.

Я пробовал несколько других предложений, таких как d-flexи justify-content-center но, похоже, никто не работает.Чего мне не хватает? 

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>

<body>
    <div class="card bg-dark text-white">
      <img class="card-img" src="http://placehold.jp/500x200.png" alt="Example">
      <div class="card-img-overlay text-center">
          <i class="fab fa-youtube fa-5x" style="color:#FF0000"></i>
      </div>
    </div>
</body>

Я хочу, чтобы значок располагался по центру изображения, но мог выравнивать его только по горизонтали, а не по вертикали.Спасибо за вашу помощь.

Ответы [ 3 ]

1 голос
/ 07 мая 2019

Вы можете добавить d-flex класс к вашему .card-img-overlay элементу, а затем добавить class="align-self-center mx-auto" к внутреннему a элементу: 

<div class="card bg-dark text-white">
   <img class="card-img" src="images/example.jpg" alt="Example">
   <div class="card-img-overlay d-flex">
     <a class="align-self-center mx-auto" data-fancybox href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
       <i class="fa fa-youtube fa-5x zoom" style="color:#FF0000"></i>
     </a>  
   </div>
</div>

Подробнее о align-self-center на официальном документе BS4: https://getbootstrap.com/docs/4.3/utilities/flex/#align-self

1 голос
/ 07 мая 2019

Вы можете использовать класс начальной загрузки flex утилит в элементе card-img-overlay: 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card bg-dark text-white">
   <img class="card-img" src="https://fakeimg.pl/250x100/000000/" alt="Example">
   <div class="card-img-overlay text-center d-flex flex-column justify-content-center">
      <a data-fancybox href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="">
      <i class="fab fa-youtube fa-5x zoom" style="color:#FF0000"></i>
      </a>
   </div>
</div>
0 голосов
/ 07 мая 2019

Ваша первая попытка была правильной (добавление d-flex и justify-content-center класса). Вы просто забыли добавить align-items-center класс.

...