도크 자식 요소

나는 다음과 같은 HTML5 몸이 :도크 자식 요소

<body> 
    <div id="container"> 
     <div class="content" id="topleft">topleft</div> 
     <div class="content" id="topcenter">topcenter</div> 
     <div class="content" id="topright">topright</div> 
     <div class="content" id="centerleft">centerleft</div> 
     <div class="content" id="centercenter">centercenter</div> 
     <div class="content" id="centerright">centerright</div> 
     <div class="content" id="bottomleft">bottomleft</div> 
     <div class="content" id="bottomcenter">bottomcenter</div> 
     <div class="content" id="bottomright">bottomright</div> 
    </div> 
</body>

을 그리고 나는이 보이는 동적 레이아웃을 달성하기 위해 싶습니다

alignment of block element

로 각 내용 요소는 부모 컨테이너에 대한 모서리에 배치 (도킹)되어야하며 모든 중심 요소는 각면의 가운데에 있어야합니다. 부모 컨테이너의 크기 나 위치가 중요하지 않으므로 절대 픽셀 좌표를 위치 지정에 사용할 수 없습니다.

div#container { 
    background: lightblue; 
    position: relative; 
    width: 500px; 
    height: 500px; 
} 

div.content 
{ 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    background: lightyellow; 
    text-align: center; 
    margin: auto; 
} 

div#topleft { 
} 

div#topcenter { 
    right: 50%; /*obviously doesn't center*/ 
} 

div#topright { 
    right: 0px; 
} 

div#centerleft { 
    top: 50%; /*obviously doesn't center*/ 
    left: 0px; 
} 

div#centercenter { 
    top: 50%; /*obviously doesn't center*/ 
    right: 50%; /*obviously doesn't center*/ 
} 

div#centerright { 
    right: 0px; 
    top: 50%; /*obviously doesn't center*/ 
} 

div#bottomleft { 
    bottom: 0px; 
} 

div#bottomcenter { 
    bottom: 0px; 
    right: 50%; /*obviously doesn't center*/ 
} 

div#bottomright { 
    right: 0px; 
    bottom: 0px; 
}

그것은 모든 구석 잘 동작하지만, 물론 모든 중심 요소가 중앙에 정렬되지 않은 나는 이유를 이해 :

이것은 내가 지금까지있는 것입니다. 난 그냥,

출처

2013-04-12 bitbonk

수직으로 부모의 높이가 고정 요소를 중심 ...이 CSS3에서 수행하는 방법을 몰라 사용 : 수평 들어

top:50%; 
margin-top:-50px;

하면 왼쪽과 같은 작업을 수행 할 수 있습니다 margin-left 또는 아무것도 정의하지 않고 "margin : 0 auto"를 사용하면 자동으로 왼쪽/오른쪽으로 똑같이 자동으로 채워지기 때문입니다.

출처

2013-04-12 22:11:42

감사합니다. 그건 쉬운 #facepalm! – bitbonk

한 가지 더 : 콘텐츠 div의 크기가 고정되어 있지 않으면 어떻게해야합니까? – bitbonk

방법이 있지만 심해요. 일반적으로 수직적 인 중심의 유연한 크기의 콘텐츠를 사용하는 것은 일반적으로 HTML의 흐름 기반 패러다임을 악용하는 신호가됩니다. display : table-cell을 사용하면 몇 가지 문제를 해결할 수 있지만 아마도 새로운 문제가 발생할 수 있습니다. –

도크 자식 요소

답변

관련 문제