DIV redux를 수직으로 정렬

좋아요, 그럼이 질문은 has been asked and answered 번이지만 아직 해결할만한 해결책이 없습니다.DIV redux를 수직으로 정렬

DIV에서 중간의 임의의 요소에 수직으로 정렬하고 싶습니다. 그래서,이 연결된 위의 질문에 튜토리얼 말한다 :

Specify the parent container as position:relative or position:absolute. 
Specify a fixed height on the child container. 
Set position:absolute and top:50% on the child container to move the top down to the middle of the parent. 
Set margin-top:-yy where yy is half the height of the child container to offset the item up.

코드에서 이러한 예 :에 무엇을 스크린 샷에 반하는 제외

<style type="text/css"> 
    #myoutercontainer { position:relative } 
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em } 
</style> 
... 
<div id="myoutercontainer"> 
    <div id="myinnercontainer"> 
     <p>Hey look! I'm vertically centered!</p> 
     <p>How sweet is this?!</p> 
    </div> 
</div>

자습서에서는 this doesn't work을 보여줍니다. 내가 바꾼 유일한 것은 외부 DIV 주위에 테두리를 추가하여 수직 정렬을 볼 수 있다는 것입니다.

이 모든 것은 직선처럼 렌더링하는 높이가 0 인 DIV를 생성합니다. 바깥 쪽 DIV에 높이를 추가하면 내부 내용을 볼 수는 있지만 내용을 실제로 수직으로 정렬하지는 않습니다. 그럼,이 예제가 왜 효과가 없습니까?

출처

2012-09-11 Channel72

안녕하세요, 나는 성공적으로 내부 div를 중심에 두었습니다. 그러나 여기에 늦었습니다. 텍스트를 가운데에 배치하는 방법을 생각하기에는 너무 게으른 것 같습니다. http://jsfiddle.net/HPN8e/2/ –

귀하의 포함 된 div도 지정된 높이를 가져야한다고 생각합니다. firebug로 #myoutercontainer div를 검사하면 실제로 예제 코드에서 보여주지 않는 13em의 높이가 있음을 알 수 있습니다.

출처

2012-09-11 18:40:50 pivot

Here's 이것에 기초한 다른 접근법은 Chris Coyer article이다. 텍스트를 고정 된 크기 div에 세로로 가운데 맞추려면 그냥 like so 프로세스를 반복하면됩니다. 오른쪽으로 정렬하려면 "text-align : center;"를 수정하십시오. myoutercontainer 스타일.

출처

2012-09-11 18:45:34 Bubbles

DIV redux를 수직으로 정렬

답변

관련 문제