부트 스트랩의 이미지 가운데에 버튼을 배치하는 방법 4

Question

수직 정렬의 중앙에 3 개의 버튼을 배치하고 부트 스트랩 4의 이미지에 배치하고 싶습니다. 그렇게 할 수 없습니다. position:relative을 적용하여 시도해 보았습니다. 이미지 및 position:absolute 단추에 있지만 작동하지 않습니다.

<div class="container-fluid headerimage" style="padding:0 !important"> 
    <div class="col-md-12" style="padding:0 !important"> 
     <img src="images/banner.jpg" alt="placeholder 960" class="img-responsive" > 
    </div> 
    <div class="container"> 
    <button class="btn btn-primary">Teacher</button> 
    <button class="btn btn-success">Student</button> 
    <button class="btn btn-warning">Administrator</button> 
    </div> 
</div> 

이것은 내 CSS 코드입니다.

.img-responsive{ 
    width:100% !important; 
    border-radius:0 0 5px 5px !important; 
} 

나는이 시점에 갇혀있다.

Answer 1

버튼을 상대적 위치에두고 이미지를 절대 위치에 놓으면 여백이있는 이미지의 버튼을 이동할 수 있습니다.

Answer 2

나는 그것을했다 당신 https://jsfiddle.net/qynck1gp/1/

CSS

.btn-wrapper{ text-align:center; position:absolute; bottom: 0px; margin: 0 auto; width:100%;} 

HTML

<div class="container-fluid headerimage" style="padding:0 !important"> 
<div class="col-md-12" style="padding:0 !important"> 
    <img src="https://www.digitalplatforms.co.za/wp-content/uploads/2015/11/Website-Design-Background.jpg" alt="placeholder 960" class="img-responsive" > 
</div> 
<div class="container"> 
<div class="btn-wrapper"> 
    <button class="btn btn-primary">Teacher</button> 
    <button class="btn btn-success">Student</button> 
    <button class="btn btn-warning">Administrator</button> 
    </div> 

버튼이 여유를 중앙에 직접 배치 할 수있는 가장 좋은 방법입니다