Попытка центрировать гибкую секцию в начальной загрузке 4

Question

Я только начинаю изучать HTML и CSS с помощью Bootstrap 4 и столкнулся с проблемой.

Я пытаюсь центрировать секцию CTA, которая использует функцию flex для разметки столбцов. Каким-то образом, несмотря на долгие исследования, мне не удалось найти способ центрировать его, поскольку он всегда кажется слегка вправо или влево.

Я предполагаю, что я что-то упустил, любые направления были бы хорошими, даже если бы я мог что-то улучшить.

Вот как это выглядит в настоящее время с этим HTML:

<div class="container">
    <div class="row">
        <a href="#"><div class="cf col-4 d-flex justify-content-center">
            <img class="cta bottom" src="img/home/dev-more.png" class="rounded">
            <img class="cta top" src="img/home/development.png" class="rounded"></a>
        </div>
        <a href="#"><div class="cf col-4  d-flex justify-content-center">
            <img class="cta bottom" src="img/home/dev-more.png" class="rounded">
            <img class="cta top" src="img/home/development.png" class="rounded"></a>
        </div>
        <a href="#"><div class="cf col-4  d-flex justify-content-center">
            <img class="cta bottom" src="img/home/dev-more.png" class="rounded">
            <img class="cta top" src="img/home/development.png" class="rounded"></a>
        </div>
    </div>
</div>

А это CSS:

    .cta {
    margin: 0;
    padding: 0;
}

img.cta {
  opacity:100; background:white;
  -o-transition:opacity .2s ease-out;
  -ms-transition:opacity .2s ease-out;
  -moz-transition:opacity .2s ease-out;
  -webkit-transition:opacity .2s ease-out;
  /* ...and now override with proper CSS property */
  transition:opacity .2s ease-out;
}

img.cta:hover { opacity:0;} 

.cf {
    margin: 0;
    padding: 0;

}

.cf img {
  position:absolute;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;

}

.cf img.top:hover {
  opacity:0;
}

.cta-text {

}

Answer 1

Ваш код не является должным образом вложенным, я думаю, вам следует начать с него. Для того, чтобы он работал, html-теги наиболее соответствуют.

<div class="container">
 <div class="row">
    <a href="#">
       <div class="cf col-4 d-flex justify-content-center">
          <img class="cta bottom" src="img/home/dev-more.png" class="rounded">
          <img class="cta top" src="img/home/development.png" class="rounded">
        </div>
    </a>

    <a href="#">
        <div class="cf col-4  d-flex justify-content-center">
           <img class="cta bottom" src="img/home/dev-more.png" class="rounded">
           <img class="cta top" src="img/home/development.png" class="rounded">
        </div>
    </a>

    <a href="#">
        <div class="cf col-4  d-flex justify-content-center">
           <img class="cta bottom" src="img/home/dev-more.png" class="rounded">
           <img class="cta top" src="img/home/development.png" class="rounded">
        </div>
    </a>
</div>

Answer 2

Ваш тег a может вызвать проблемы здесь.Во-первых, он не правильно закрыт.

Попробуйте написать так:

<a href="#" class="cf col-4  d-flex justify-content-center">
   <img class="cta bottom" src="img/home/dev-more.png" class="rounded">
   <img class="cta top" src="img/home/development.png" class="rounded">
</a>

Во-вторых, я считаю, что всегда лучше иметь его «внутри» div, который вы пытаетесь отцентрировать.а не снаружи.Это связано с тем, что теги по умолчанию не считаются «display: block».

или

<div class="cf col-4  d-flex justify-content-center">
   <a href='#'>
     <img class="cta bottom" src="img/home/dev-more.png" class="rounded">
   </a>
   <a href='#'>
     <img class="cta top" src="img/home/development.png" class="rounded">
   </a>
</div>

с CSS:

.d-flex > a {
  display: inline-block
}