세로 중심의 이미지 겹침 텍스트

Question

세로 중심의 이미지가있는 웹 사이트에서 작업하고 있습니다. 페이지에도 단락이 있으며 이미지 아래에 있기를 원합니다. 나는 이것을 할 수없고 창 크기를 조정하면 이미지가 텍스트와 겹쳐집니다. http://jsfiddle.net/qkmuM/ 내 CSS는 내가 원하는 것을 얻는 방법에

img { 
    margin:auto; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    width:100%; 
    max-width:900px; 
} 

어떤 아이디어인가? 감사. 요소는 몸체에 대해 위치 때문에

Answer 1

img 태그로부터 display: absolute을 제거한다.

체크 fiddle

업데이트 :은 내가 단락 중심에 아래의 이미지를 배치, 당신이 가리키는 거 같아요. 이제 단락의 최고 위치를 설정할 수 있습니다

img { // To vertically align the image 
    margin: 0 auto; 
    display: table-cell; 
    max-width: 200px; 
    vertical-align: middle; 
} 
p { 
    text-align:center; 
} 

JSFiddle

Answer 2

같이 변경합니다.

p { 
    position:relative; 
    top: Xpx //(set it according to your requirement) 
}