CSS - 세로 이미지

Question

에 사업부를 중심 내가 다음 HTML을 : .button-left 항상 이미지의 중심에 있어야 할 내가 달성하고자하는 어떤

<div class='container'> 
    <img src="http://lorempixel.com/400/400" /> 
    <div class='button-left'><</div> 
    </div> 

는 상관없이 이미지 크기, 대신 div는 내 html 요소에 따라 배치됩니다.

이 내 CSS입니다 :

.container img { 
    position: relative; 
} 
.button-left { 
    position: absolute; 
    top: 50%; 
    background-color: red; 
} 

할까요하지 .button-left DIV 위치의 상대 위치 지정된 이미지에 따라?

당신이 라이브 데모를 시도 할 경우에 JsBin : 당신은 이미지에 컨테이너에 position: relative을 설정하지해야 https://jsbin.com/cuwaguyiza/edit?html,css,output

Answer 1

. 또한 버튼을 위로 옮기는 것이 좋습니다. 그래서 완벽하게 중앙에 배치됩니다.

.container { 
    position: relative; 
} 

.button-left { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Answer 2

사용하지 않을 때는 position을 사용하지 마십시오.

1. 플렉스 박스.

   .container { 
    
       display: flex; 
    
       align-items: center; 
    
   }

   <div class='container'> 
    
       <img src="http://lorempixel.com/400/400"> 
    
       <div class='button-left'>Lorem</div> 
    
   </div>

2. 라인 높이

(U 텍스트가 단선 인 경우)

.container img { 
 
    vertical-align: middle; 
 
} 
 

 
.button-left { 
 
    display: inline-block; 
 
    line-height: 400px; 
 
}

<div class='container'> 
 
    <img src="http://lorempixel.com/400/400"><!-- dont delete this comment 
 
--><div class='button-left'>Lorem</div> 
 
</div>

Answer 3

.container img { 
    position: relative; 
} 
.button-left { 
    left: 50%; 
    position: absolute; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    background-color: red; 

} 

OR

,

.container img { 
    position: relative; 
    display: block; 
    margin: 0 auto; 
}