작은 컨테이너 내에서 이미지의 세로 정렬

Question

여기 내 문제가 있습니다. 블록의 너비가 348px이고 오른쪽 크기가 144px이므로 이미지를 세로 가운데에 배치하고 싶습니다. 진정해? 내 문제는 내가 이미지 나 블록의 높이를 모른다는 것이다. 배경 이미지를 만들지 않고 이미지를 컨테이너의 위쪽으로 지나치게 수직으로 배치하려면 어떻게합니까?

CSS 
#block { width: 348px; position: relative; } 
#content { width: 164px; padding: 20px; margin-right: 144px; } 
#image { width: 144px; position: absolute; right: 0; } 

MARKUP 
<div id="block"> 
    <div id="image"><img url="imageurl" /></div> 
    <div id="content">Some content goes here.</div> 
</div> 

나는 그것이 얼마나 도움이 될지 모르지만 잘하면 그것은 뭔가를합니다.

Answer 1

솔루션을 현재의 HTML 태그와 태그에 의해 지적은 다음과 같이 수행 할 수있는 기반 만 CSS 사용 :

이 working Fiddle 예를 참조를!

HTML

<div id="block"> 
    <div id="content">Some content goes here.</div> 
    <div id="image"> 
     <img src="path_to_image" /> 
    </div> 
</div> 

CSS

#block { 
    width: 348px; 
    display: table;   /* set the main wrapper to display as a table */ 
} 
#content { 
    width: 164px; 
    padding: 20px; 
} 
#image { 
    width: 144px; 
    display: table-cell; /* set the inner wrapper to display as a cell */ 
    vertical-align: middle; /* tell to vertically align the contents */ 
} 

는 기술과 충돌 사용중인 일부 CSS position 선언을 제거 할 필요가 있었다. 그러나 CSS없이 정확히 같은 레이아웃을 구현할 수 있으므로 CSS vertical-align:middle이 예상대로 작동 할 수 있습니다.

당신의 존재 CSS 선언 중 하나를 제거하고 정확히 같은 목표 달성이없는 마크 업에

---

JQuery와 솔루션 :

이 working Fiddle 예를 참조를!

jQuery를

#image 내부 img에 도착하고, 그 높이를 수집하여 두 나누어 얻어진 값과 음으로 마진을 적용한다.

$(function() { 
    var $target = $('#image').find('img'); 

    $target.css({ 
    "margin-top" : "-" + ($target.height()/2) + "px" // adjust the top margin 
    }); 
}); 

CSS

#block { 
    width: 348px; 
    position: relative; 
} 
#content { 
    width: 164px; 
    padding: 20px; 
    margin-right: 144px; 
} 
#image { 
    width: 144px; 
    position: absolute; 
    right: 0; 
    top: 0;    /* fit to the top */ 
    bottom: 0;   /* fit to the bottom */ 
    /*overflow:hidden;*/ /* optional if the img is bigger that this container */ 
} 
#image img { 
    position: absolute; /* remove element from the document flow */ 
    top: 50%;   /* move it down by 50% of its parent height */ 
} 

HTML

<div id="block"> 
    <div id="image"> 
     <img src="path_to_image" /> 
    </div> 
    <div id="content">Some content goes here.</div> 
</div> 

현재 마크 업을 보존하고 몇 가지 추가 CSS가 작동하도록 추가되었습니다. jQuery 부분은 가능한 한 간단하게 두십시오!

Answer 2

절대적으로 이미지를 컨테이너 내부에 배치 할 수 있습니다. 그렇지 않은 경우에는 javascript를 사용하여 컨테이너 높이와 이미지 높이를 얻고 이미지를 그런 식으로 배치해야합니다. .

는 CSS를 통해 그것을 설정하려면 : 컨테이너의 요소 :

는 "상대적 위치"의 스타일을 설정합니다. 그런 다음 이미지의 스타일을 "position : absolute; top : 50 %;"로 설정하십시오. 컨테이너에 높이를 추가해야 할 수도 있습니다.