질문

내 사진에서 상단의 파란색 선은 navbar입니다.

<section class="bgimage-fooldal">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text-fooldal">
        <h2 class="hero_title">Hello, world! Full width Hero-unit header</h2>
        <p class="hero_desc">This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. Vevőidről, szállítóidról online információt nyerhetsz, így értesülhetsz arról.</p>
        <p><a href="#" class="btn btn-large hero_to_link">Árajánlat kérése »</a></p>
      </div>
    </div>
  </div>
</section>


/*************************** Hero css ****************************/
.bgimage-fooldal {
  width:100%;
  height:400px;
  background: url('../images/assets/teszt-1.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-attachment: fixed;
}
.hero-text-fooldal {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

답변1

position : relative to bgimage-fooldal class를 제공해야 div 높이에 따라 수직 중심이됩니다.

.bgimage-fooldal {
  width:100%;
  height:400px;
  background: url('https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-attachment: fixed;
  position:relative;
}
.hero-text-fooldal {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

<section class="bgimage-fooldal">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text-fooldal">
        <h2 class="hero_title">Hello, world! Full width Hero-unit header</h2>
        <p class="hero_desc">This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. Vevőidről, szállítóidról online információt nyerhetsz, így értesülhetsz arról.</p>
        <p><a href="#" class="btn btn-large hero_to_link">Árajánlat kérése »</a></p>
      </div>
    </div>
  </div>
</section>

Expand snippet

답변2

이를 위해 Flexbox를 사용할 수 있습니다. 예를 들면 :

.hero-text-fooldal {
  width:100%;
  height:400px;
  background: url('../images/assets/teszt-1.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}