부모 div 내부에 수평으로 div를 중앙에 배치하는 방법

114

어떻게 중앙 않는 div부모의 내부에 수평 div으로 CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>

html css

— 독수리
소스

1

다음은 div 내에서 div를 세로, 가로 또는 둘 다 (순수 CSS) 중앙에 배치하는 두 가지 간단한 방법입니다. stackoverflow.com/a/31977476/3597276

— Michael Benjamin

158

부모 div에 너비가 없거나 너비가 넓고 자식 div의 너비가 더 작다고 가정합니다. 다음은 상단과 하단의 여백을 0으로 설정하고 측면이 자동으로 맞도록 설정합니다. 이것은 div를 중앙에 배치합니다.

div#child {
    margin: 0 auto;
}

— 마크 엠블 링
소스

@표. IE6에서 작동하는 방법을 알고 있습니까? IE6는 정말 많이 짜증나지만 여전히 그것을 사용하는 사람들이 있습니다.

— Bakhtiyor 2011 년

@Bakhtiyor : 내가 기억하는 한 그렇습니다. 어떤 문제가 있습니까? 이전에 다루지 않은 특정 문제가있는 경우 새 질문을 열 수 있습니다. 그래도 확인하기 위해 IE6에 액세스 할 수 없습니다.

— Mark Embling 2011-09-07

3

@Bakhtiyor : 실제로 그것에 대해 생각한 후 IE.old text-align: center;에서 parentdiv에 설정 한 다음 다시 왼쪽 (또는 기타) 으로 설정해야한다고 생각 합니다 child. 이 문제가 IE6에 영향을 미치는지 확실하지 않습니다 ...

— Mark Embling 2011 년

@Mark & @Bakhtiyor 어떤 이유로 child내가 확인한 모든 버전의 IE (IE6-8)에서 더 많은 표준을 준수하는 브라우저와 비교하여 내 div가 왼쪽으로 이동하는 것처럼 보였습니다. 그리고 text-align: center;에 대한 parent및 text-align: left;에 대한이 child모든 버전을 고정.

— brookmarker 2012

8

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

— 제임스 굿윈
소스

2

이 솔루션은 IE 6을 지원하지만 text-align:left;#child div 에 추가 하는 것을 잊지 마십시오

— Moak

1

text-align:center하위 div 또는 상위 div에?

— 아니 쉬 나이 르

6

흥미롭게도 두 개 이상의 div를 중앙에 배치하려는 경우 (중앙에 나란히 배치) 다음 방법을 사용합니다.

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

— 폴 크리스 존스
소스

4

왼쪽 및 오른쪽 여백에 "auto"값을 사용하여 브라우저가 내부 div의 양쪽에 사용 가능한 공간을 균등하게 분배하도록 할 수 있습니다.

<div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>

— x4u
소스

2

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>

— 수피아 네 하수
소스