반응 레이아웃의 가운데 이미지

Question

이미지를 가져 와서 브라우저로 크기를 조정하는 반응 형 헤더를 설정하려고합니다. http://jsfiddle.net/jwoodcreative/tUW3k/

내가 근무하고 일부를 havent 몇 가지 CSS 트릭을 시도했다 : 내가 달성하기 위해 관리 할 수있는 것은 (이 경우에 a 요소)

하는 예를 참조하십시오를이 컨테이너의 수직 내에서 이미지를 중심입니다 jQuery. 아무도 모른다면 어떤 유형의 솔루션이든 적합합니다.

Answer 1

당신은 항상 상단 사용할 수 있습니다 : 여기처럼 50 %의 트릭 : 50 %, 바닥을 jsfiddle v13

.outerElement { 
    position: relative; 
    height: XXpx; 
    top: 50%; 
} 

.innerElement { 
    position: absolute; 
    bottom: 50%; 
} 

innerElement의 높이가 외부 요소의 하나로서 동일하지 않기 때문에이 작품 , 요소를 가운데에 맞출 수 있습니다 (높이가 동일하면 위치를 0으로 다시 지정하면됩니다)

Answer 2

마찬가지로 this? 이미지를 배경 이미지로 변경했습니다. CSS에서 중심에 놓을 수 있습니다. 링크가 표시되도록 비 분리 공간 ( )을 추가했습니다. 이게 니가 원하는 것 같아, 그렇지?

배경 속성 설명서에서 here을보고 더 많은 이미지 모양을 변경할 수 있습니다.