Изображение с проблемой перекрытия блоков

Question

Утро всем,

В настоящее время у меня проблемы с выравниванием div внутри контейнера с фоновым изображением. В настоящее время они сидят бок о бок, и я не могу заставить их выровняться должным образом, я прикрепил изображение того, чего я пытаюсь достичь, это вроде как, но мне просто нужно выравнивание, чтобы работать должным образом :( - Кто-нибудь может указать мне правильное направление?

Заранее спасибо!

Чего я пытаюсь достичь:

    .card {
        position: relative;
        display: flex;
        align-items: center;
        float: left;
        margin: (30px) 0;
        width: 45%;

        @media #{$BPD} {
            margin: 2.5%;
        }

        @media #{$MaxBPD} {
            width: 100%;
        }

        &:before {
            content: "";
            width: 1px;
            margin-left: -1px;
            float: left;
            height: 0;

            @media #{$BPD} {
                padding-top: 30px / 30px * 100%;
            }
            
        }

        &:after {
            content: "";
            display: table;
            clear: both;
        }
    }

    .card--cta {
        @extend .card;

        display: block;
        padding: 0 !important;

        .card--cta-block {
            display: block;
            padding: 49px 0;
            border-bottom: 1px solid;

            &:last-child {
                border-bottom: 0;
            }
        }

        .card--image {
            margin: 0;
        }
    }


    .card.card--quote {

        display: flex;
        background: $brand-white;
        padding: 48px 24px;
        border: 3px solid black;
        align-items: center;


        @media #{$MaxBPB} {
            padding: 50px 25px;
        }
        
        img {
            z-index: -1;
        }

        div {
            width: 100%;
            text-align: center;

            h2 {
                margin-bottom: 49px;
                line-height: 49px;
            }

            p {
                margin: 30px 0;
                line-height: 30px;
            }
        }
    }

    <div class="card--cta">
      <div class="card card--image">
        <picture>
          <img src="//picsum.photos/400/400/?random" alt="" />
        </picture>
      </div>
      <div class="card card--cta">
        <div class="card--cta-block">
          <h3>Block text 1</h3>
        </div>
        <div class="card--cta-block">
          <h3>Block text 2</h3>
        </div>
        <div class="card--cta-block">
          <h3>Block text 3</h3>
        </div>
      </div>
    </div>

Answer 1

Вот то, что я придумал, в итоге я переключил довольно много значений, но в основном я использовал flexbox для центрирования всего. Однако я не знаю, будет ли он работать с вашим скомпилированным CSS, поскольку вы предоставили только SCSS.

Соответствующий CSS, который я добавил, находится внизу.

Anways вот оно:

.card {
  position: relative;
  display: flex;
  align-items: center;
  float: left;
  margin: (30px) 0;
  @media #{$BPD} {
    margin: 2.5%;
  }
  @media #{$MaxBPD} {
    width: 100%;
  }
  &:before {
    content: "";
    width: 1px;
    margin-left: -1px;
    float: left;
    height: 0;
    @media #{$BPD} {
      padding-top: 30px / 30px * 100%;
    }
  }
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.card--cta {
  @extend .card;
  display: block;
  padding: 0 !important;
  .card--cta-block {
    display: block;
    padding: 49px 0;
    border-bottom: 1px solid;
    &:last-child {
      border-bottom: 0;
    }
  }
  .card--image {
    margin: 0;
  }
}

.card.card--quote {
  display: flex;
  background: $brand-white;
  padding: 48px 24px;
  border: 3px solid black;
  align-items: center;
  @media #{$MaxBPB} {
    padding: 50px 25px;
  }
  img {
    z-index: -1;
  }
  div {
    width: 100%;
    text-align: center;
    h2 {
      margin-bottom: 49px;
      line-height: 49px;
    }
    p {
      margin: 30px 0;
      line-height: 30px;
    }
  }
}

.card--cta {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card--cta-block {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
}

.card.card--cta {
  height: 516px;
  width: 516px;
  align-items: stretch;
  background: #fff;
  position: absolute;
}

<div class="card--cta">
  <div class="card card--image">
    <picture>
      <img src="//picsum.photos/600/600/?random" alt="" />
    </picture>
  </div>
  <div class="card card--cta">
    <div class="card--cta-block">
      <h3>Block text 1</h3>
    </div>
    <div class="card--cta-block">
      <h3>Block text 2</h3>
    </div>
    <div class="card--cta-block">
      <h3>Block text 3</h3>
    </div>
  </div>
</div>

Answer 2

Это то, что вы хотите?

.card--cta{
  position: relative;
}
.divbox{
  position:absolute;
  top: 0;
  left : 0;
  width : 100%;
  height: 100%;
  display : flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.divbox div{
  background-color: #fff;
  border: 1px solid black;
  padding: 20px;
}

    <div class="card--cta">
      <div class="card card--image">
        <picture style="width: 100%;">
          <img style="width: inherit;" src="//picsum.photos/400/400/?random" alt="" />
        </picture>
      </div>
      <div class="card card--cta divbox">
        <div class="card--cta-block">
          <h3>Block text 1</h3>
        </div>
        <div class="card--cta-block">
          <h3>Block text 2</h3>
        </div>
        <div class="card--cta-block">
          <h3>Block text 3</h3>
        </div>
      </div>
    </div>

Answer 3

Если вам удобно изменять структуру HTML. затем попробуйте использовать следующие стили:

<div class="container ">
  <div style="font-size:36px; width:300px;margin: 0 auto;">
    <h3>Block text 1</h3>
    <h3>Block text 2</h3>
    <h3>Block text 3</h3>
  </div>
</div>
<style>
.container {
    /* The image used */
    background-image: url("//picsum.photos/400/400/?random");
    /* Set a specific height */
    min-height: 500px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

Answer 4

Добавьте 2 (abc, def) класса для элементов, показанных ниже

<div class="card--cta abc">
      <div class="card card--image">
        <picture>
          <img src="//picsum.photos/400/400/?random" alt="" />
        </picture>
      </div>
      <div class="card card--cta def">
        <div class="card--cta-block">
          <h3>Block text 1</h3>
        </div>
        <div class="card--cta-block">
          <h3>Block text 2</h3>
        </div>
        <div class="card--cta-block">
          <h3>Block text 3</h3>
        </div>
      </div>
    </div>

и добавьте эти 2 стиля

.abc {
    position: relative;
}
.def {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}