영웅 div의 가운데 위치 지정 텍스트

Question

이 코드는 텍스트가 div의 수직 중심에 배치되지 않습니다. 나는 50 %의 지위를 얻었 기 때문에 그것을 이해하지 못한다. 그리고 이미지를 위해, 나는 원하는 높이를 줄 수 없다?

내 사진에서 상단의 파란색 선이 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%); 

} 

Answer 1

당신은 위치를 줄 필요가 : 상대를 클래스 fooldal을 bgimage하는 것이

.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>

Answer 2

당신 DIV의 높이에 따라 수직 중심 당신은이를 달성하기 위해 인 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; 
} 

이 .hero-text-fooldal