텍스트가 가운데에있는 이미지 위에 겹쳐서 표시됩니다.

Question

가운데에 텍스트를 가운데에 맞추려고합니다.

<div class="col-md-6"> 
    <div class="safaripreview"> 
     <img src="img/safari1.png" class="img-responsive" alt=""> 
     <h3>Our String Of Pearls</h3> 
    </div> 
</div> 

내 CSS는 현재

.safaripreview 
{ 
    position: relative; 
} 

.safaripreview h3 
{ 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    color: white; 
    padding: 10px; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 700; 
} 

이 생산된다 : 여기 내 코드는 무엇 내가이

을 달성 할

더 좋은 방법이 있나요? 플렉스 박스?

Answer 1

예를 가지고 :

당신도 할 수 있습니다. 인 flexbox는

.safaripreview { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.safaripreview { 
 
    display: inline-block; 
 
} 
 
.safaripreview h3 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    color: white; 
 
}

<div class="safaripreview"> 
 
    <img src="http://www.fillmurray.com/460/300" class="img-responsive" alt=""> 
 
    <h3>Our String Of Pearls</h3> 
 
</div>

Answer 2

position: absolute; 
top: 50%; 
right: 30px; 
left: 30px; 

transform: translateY(-50%); 

달성 할 수 있습니다.

position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 

align-items: center; 
justify-content: center; 

display: flex; 

을하지만 이것은 분명히 덜 지원 및 더 라인 :

Answer 3

변경 CSS를 이런 식으로

.safaripreview h3 
{ 
    position: absolute; 
    top: 50%; 
    left:50%; 
    transform: translate(-50%, -50%); 
    width: 100%; 
    color: white; 
    padding: 10px; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 700; 
}