반응 레이아웃에서 절대 위치 지정없이 이미지를 수직 정렬하는 방법

Question

나는 처럼 가운데 정렬되도록 margin-left:auto; 및 margin-right:auto;을 알고 있습니다.

제 질문은 수직 정렬에 대한 것입니다.

내 버선과 관련하여 내 이미지를 유지하고 싶습니다.

<section> 
    <div class="half"> 
    <img /> 
    </div> 

    <div class="half"> 
    <img /> 
    </div> 
</section> 

STYLE :

.half { 
height:100%; 
width: 50%; 
display:inline-block; 
float:left; 
} 

.half img { 
max-width:93%; 
max-height:90%; 
} 

바이올린에 예 : http://jsfiddle.net/f16wpgpm/3/

Answer 1

이 position:relative;.half에 추가 한 다음 img 선택에 다음 CSS를 추가

margin: auto; 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 

0 123,

Answer 2

http://jsfiddle.net/f16wpgpm/6/

이에 대한 display:table 및 display:table-cell를 사용할 수 있습니다.

section { 
    display:table; 
    width:100%; 
} 

.half { 
    width: 50%; 
    display:table-cell; 
    vertical-align:middle; 
} 

Answer 3

테이블 표시 방법을 사용하여 세로로 정렬 할 수 있습니다. 그러나,이 정렬 세포의 역할을하도록 내부 <div>가 필요합니다

<div class="half first_half"> 
    <div class="inner"> 
     <img src="http://www.capitale-creativo.it/img/capcrea1.jpg" /> 
    </div> 
</div> 

그런 다음 테이블로 .half 표시하고 셀과 .inner 표시를함으로써, 당신은 추가 할 수 있습니다

vertical-align: middle;과 같이 :

.half{ 
    height:100%; 
    width: 50%; 
    display:table; 
    float:left; 
} 

.inner{ 
    display: table-cell; 
    vertical-align: middle; 
} 

여기

는 행동에 : http://jsfiddle.net/f16wpgpm/4/