세로 중심 내용, 알 수없는 높이, 오버플로 숨김

나는 부모 div가 콘텐츠보다 작은 div의 내부에 수직으로 콘텐츠 (특히 iFrame)를 배치해야하는 상황이 있습니다. 지금까지 수직으로 중심을 잡을 수있는 모든 부분은 같은 방식으로 작동하지 않는 이미지를 찍는 것입니다.세로 중심 내용, 알 수없는 높이, 오버플로 숨김

여기서 단순 코드는 ...

<div class="video"> 
    <iframe id="youtube-XXXX" src="..." style="width: 855px; height: 481px;"></iframe> 
</div>

이제 iframe이 생성되는 코드하지만 I가 참조 할 수있는 ID 값을 가지고

. 상위 DIV는 높이가 330px 이상이어야합니다 (반응 형 디자인이므로 짧아 질 수 있습니다). 따라서이 경우 숨겨진 iframe의 상단 및 하단 75 픽셀 (481px - 330px/2)을 찾고 있습니다.

div.video { 
    overflow: hidden; 
    max-height: 330px; 
}

을 지금은 예상 높이지만 사업부의 상단과 iframe이 라인의 상단까지 얻을, 다음과 같이

는 지금, 나는 div.video에 CSS 스타일을 가지고있다. 중간에 렌더링 할 iframe을 어떻게 얻을 수 있습니까?

출처

2013-08-15 Jeff

당신은 목적을 위해 jQuery를 사용할 수 있습니다

jQuery.fn.center = function() { 
this.css("position","absolute"); 
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight())/2) + 
              $(window).scrollTop()) + "px"); 
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth())/2) + 
              $(window).scrollLeft()) + "px"); 
return this; 
}

하고 통화는 다음과 같이 할 수 있습니다 : JQuery와 기능은 다음과 같이 될 것이다

귀하의 경우

$(element).center();

가에 이름을 지정하여 DIV "dvVideo"와 같은 다음 함수를 호출 :

$("#dvVideo").center();

신용 : Using jQuery to center a DIV on the screen

출처

2013-08-15 00:30:04 inN0Cent

세로 중심 내용, 알 수없는 높이, 오버플로 숨김

답변

관련 문제