调整屏幕大小时使文本移动

Question

我希望我的图像和文本（h1、h3 和“月桂树”图像）“锚定”到屏幕左侧，以便在我调整屏幕尺寸时（特别是从左到右)，图像与背景图像/叠加层保持相同的填充/边距。

目前，图像仅在到达屏幕左侧的最末端后才会调整。根据屏幕大小，这会导致图像看起来不居中。 here is a visual of the issue and requested solution

很抱歉发了这么长的帖子，并在此先感谢您。这是#potato。

html 部分（使用 Hugo——因此 markdown 插入）

<section class="slider-invest {{ if .bg_overlay }}overly-invest{{ end }}" 
style="background-image: url('{{ .bg_image_slider | relURL }}');">
 <div class="container">
  <div class="row">
   <div class="col-md-12">
    <div class="block">
      {{ with .heading }}<h1>{{ . | markdownify }}</h1>{{ end }}
      {{ with .summary1 }}<h3 class="invest-slider-text">{{ . | 
      markdownify }}</h3>{{ end }}
      {{ with .summary2 }}<h3 class="invest-slider-text">{{ . | 
      markdownify }}</h3>{{ end }}
      {{ with .summary3 }}<h3 class="invest-slider-text">{{ . | 
      markdownify }}</h3>{{ end }}
      {{ with .summary4 }}<h3 class="invest-slider-text">{{ . | 
      markdownify }}</h3>{{ end }}
      {{ with .summary5 }}<h3 class="invest-slider-text">{{ . | 
      markdownify }}</h3>{{ end }}
    </div>
    <div>
    <img src="{{ .laurel | relURL }}" class="laurel" alt="Img">
    </div>
    {{ with .button }}
    {{ if .enable }}
    <a href="{{ .link | relLangURL }}" class="btn-invest btn btn- 
    main animated fadeInUp">{{ .label }}</a>
    {{ end }}
    {{ end }}
    </div>
  </div>
</div>

css

.slider-invest {
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  padding: 180px 0 380px;
  position: relative;
  @include tablet {
    background-attachment: scroll;
    padding: 150px 0;
  }
  
  .block {
  color: #E3E3E4;
  text-align: center;

  h1 {
    color: $theme;
    font-weight: 300;
    font-size: 55px;
    line-height: 1.33em;
    letter-spacing: 0.1em;
    padding-bottom: 5px;
    text-transform: uppercase;
    margin-right: 52.5%;
    margin-top: 0%;

    @include tablet {
      font-size: 30px;
    }

    @include mobile {
      font-size: 28px;
    }

    @include mobile-xs {
      font-size: 26px;
    }
  }

  p {
    margin-bottom: 30px;
    color: $theme;
    font-size: 22px;
    line-height: 1.5em;
    font-weight: 300;

    @include mobile {
      font-size: 14px;
    }
  }

  @include mobile {
    .btn {
      font-size: 12px;
    }
  }
}
}

.overly-invest {
  position: relative;

  &:before {
    content: "";
    position: absolute;
    border-radius: 5px;
    left: 7.5%;
    top: 10%;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 80%;
    background: #fff;
    opacity: 0.90;
  }
}

.invest-slider-text {
  position: relative;
  font-size: 28px;
  padding-right: 57%;
  margin-left: 2%;
  color: #292929;
  padding-top: 25px;
}

.laurel {
  width: 38vw;
  height: auto;
  left: 0%;
  padding-top: 30px;
 }

Answer 1

答案是删除“容器”元素。如此简单，但值得2天的视力。哈哈。