플로팅 컨테이너에 여러 개의 플로팅 된 div가있는 부동 컨테이너가 있습니다.플로트 된 컨테이너 내부에 플로팅 된 div를 가운데 정렬합니다.
플로팅 된 컨테이너에 대해 이러한 모든 떠 다니는 하위 div를 가운데 정렬 (텍스트 정렬 아님)하고 싶습니다.
어떻게하면됩니까? 한 번에
,이 자식 사업부의 1은 분명히 나는 경우 정렬 문제의 중심에 직면하고있다 (종류의 회전 목마 등)
을 다른 자식 된 div를 볼 수 ..User가 이전/다음 클릭 브라우저에서 볼 수 있습니다 나는 float를 사용합니다 : child div의 왼쪽.
플로팅 요소를 부모 요소 기준으로 정렬 할 수 없습니다.
float CSS 속성은 요소를 문서의 해당 컨텍스트에서 rip합니다 (position:absolute/fixed과 유사). 이 결과 요소는 "부모 중심에"배치 할 수 없습니다.
어린이 한 명만 표시하는 경우 div은 아마도 float 일 필요가 없습니다. 다른 블록의 내부가 아닌 떴다 블록을 중심으로하는 가장 좋은 방법은 다음과 스타일을 지정하는 것입니다 :
.child {
margin: 0 auto;
}
이 센터 것을 div.child 모두 왼쪽 및 오른쪽 여백이 부모 컨테이너에 맞게 똑같이 걸쳐 때문이다. 마찬가지로 왼쪽에 div의를 정렬 할 수 있습니다 오른쪽으로 : 당신이 컨테이너와 아이 모두를위한 고정 폭이있는 경우
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
는, 당신은 (컨테이너 div의 폭에 margin-left 및 margin-right 설정을 사용할 수 있습니다 - 포함 된 폭 너비)/2. 물론 패딩과 테두리가있는 경우 공식에서 해당 패딩을 처리해야합니다.
저는 부모 컨테이너 내부의 세 div에 대한 해결책을 찾고 있었으며 좋은 해결책이 제시되지 않은이 오래된 게시물을 발견했습니다.
내 상황 : 부모 컨테이너의 화면 너비가 100 %이므로 화면에 맞을 수 있습니다. 또한 상위 컨테이너가 너무 커지지 않도록 최대 너비를 설정합니다. max-width에서 세 자식 div가 모두 한 행에 표시되도록합니다.
페이지가 축소되고 부모 컨테이너가 너비가 축소되면서 세 자식 div가 리플 로우하도록하고 각 자식 div는 이전 자식 div 아래로 모두 밀어 넣어 수직으로 스택합니다. 이런 일이 발생하면 하위 div가 부모 컨테이너 내에서 가운데 맞춤 상태로 유지되기를 바랍니다.
롭 W 진정 상태로 "컨텍스트에서 요소를 입술"하지 사용 float로 인 솔루션 대신 사용 인라인 블록 :
.parentContainer{
margin:0 auto; /*keep centered in page*/
width:100%; /*stretch to page*/
max-width:800px; /*expand up to 800px*/
text-align:center; /*keep my children centered*/
}
.childDiv{
display:inline-block /*treat me as a block that flows like text*/
width:230px; /*set my size*/
vertical-align:top; /*keep me aligned at the top of my parent even if my siblings are taller than me*/
}
<div class='parentContainer'>
<div class='childDiv'>Content 1</div>
<div class='childDiv'>Content 2</div>
<div class='childDiv'>Content 3</div>
</div>
당신은 부모 컨테이너를 떠 있습니다 절대 위치 지정, 거의 무엇이든간에 자식 div가 동일한 동작을 유지합니다.
건배