세로 자식 div 부모 세로 높이를 알고

부모 div 높이를 알지 못하고 부모 div 안에 세로 div를 세로로 가운데에 배치하는 방법을 알고있는 사람이 궁금합니다.세로 자식 div 부모 세로 높이를 알고

내가 좋아하는 스타일의 갤러리 페이지 (이미지)가 있으며 마우스를 올리면 이미지 상단의 이미지 위에 정보가있는 div가 표시됩니다. 각 이미지의 높이가 다를 수 있으므로 부모 div의 가운데에 어린이 콘텐트를 배치하는 방법을 알지 못합니다.

jQuery Masonary 플러그인을 사용하여 레이아웃을 만듭니다.

현재 이미지가있는 외부 div가 있습니다. 배경색이 흰색 (또는 무엇이든) 0,0, 너비와 높이가 100 % 인 내부 div. 이 모든 것이 훌륭하게 작동하며 텍스트 정렬을 사용하여 가로 방향으로 중심을 잡을 수있었습니다. center : center;

감사합니다.

출처

2013-02-01 puks1978

잠깐 .. 수직으로 * 또는 * 수평으로 가운데에 놓으려고합니까? –

당신은'display : table','display : table-cell'과 같은 CSS 규칙을 시도한 다음 CSS'vertical-align : center'를 적용합니까? – MatRt

세로로. 나는 수평을 쉽게 설정할 수 있었지만 각 외부 div의 높이가 중간에 수직 정렬을 설정할 수 있는지 알 수 없었습니다 – puks1978

두 가지 가운데에 맞춰 설정해야합니다. 아직 테스트하지 않았 음 :

var ParentW = $("parent-id").width(); 
var ParentH = $("parent-id").height(); 
var ChildW = $("child-id").width(); 
var ChildH = $("child-id").height(); 
var PosW = (ParentW - ChildW)/2; 
var PosH = (ParentH - ChildH)/3; 
$("child-id").css({"top":PosH, "left": PosW });

출처

2013-02-01 01:14:47

잘 작동합니다. 감사합니다 – puks1978

당신은 환영합니다, 행복 코딩 :) –

CSS 솔루션이 필요한 경우이 기능을 사용할 수 있다고 생각합니다. 예를 들어

, 당신은 같은 레이아웃이있는 경우 :

.parent { 
    /* change values to adjust the top and bottom space used to vertically center */ 
    padding-top: 33%; 
    padding-bottom: 33%; 
} 

.child { 
    width: 50%; /* the width is not mandatory, of course */ 
    margin: auto; 
    overflow: hidden; 
}

이 CSS와

<div class="container"> 
    <div class="parent"> 
     <div class="child"> 
      Lorem ipsum.... 
     </div> 
    </div> 
</div>

을 당신이 .parent 용기 내부에 수평 및 수직 .child 블록의 중심을 할 수 있어야한다 테스트 할 수 있습니다 here. 희망이 어떤 도움이 될 수 있습니다.

출처

2013-02-01 01:54:24 Ragnarokkr

세로 자식 div 부모 세로 높이를 알고

답변

관련 문제