수평으로 요소를 가운데 가운데를 가운데
질문
CSS를 사용하여 다른
<div id="outer">
<div id="inner">Foo foo</div>
</div>
답변
이 CSS를 내부
#inner {
width: 50%;
margin: 0 auto;
}
물론 폭을 50 %로 설정할 필요가 없습니다.포함 된
Internet Explorer 8 (그리고 나중에)을 타겟팅하는 경우 다음과 같은 대신이 옵션을 가질 수 있습니다.
#inner {
display: table;
margin: 0 auto;
}
그것은 내부 요소 센터를 수평으로 만들고 특정 너비를 설정하지 않고 작동합니다.
여기서 작업 예제 :
#inner { 디스플레이 : 표; 마진 : 0 자동; 테두리 : 1px 솔리드 블랙; } #outer { 테두리 : 1px 솔리드 레드; 너비 : 100 % }
편집하다
Flexbox를 사용하면 DIV를 수평 및 수직 중심으로 스타일링하는 것이 매우 쉽습니다.
#inner { 테두리 : 1px 솔리드 블랙; } #outer { 테두리 : 1px 솔리드 레드; 너비 : 100 %; 디스플레이 : 플렉스; 정당화 내용 : 센터; }
DIV를 세로 중심으로 정렬하려면 속성 정렬 항목 : CENTER를 사용하십시오.
답변
내부 DIV에 고정 된 너비를 설정하지 않으려면 다음과 같이 할 수 있습니다.
#outer { 너비 : 100 %; 텍스트 - 정렬 : 센터; } #inner { 디스플레이 : 인라인 블록; }
이는 내부 div를 텍스트 정렬을 중심으로 인라인 요소로 만듭니다.
답변
가장 좋은 방법은 CSS 3입니다.
상자 모델 :
#outer { 너비 : 100 %; / * firefox * / 디스플레이 : -Moz-Box; -moz-box-pack : 센터; -moz-box-align : 중심; / * 사파리와 크롬 * / 디스플레이 : -webkit-box; -webkit-box-pack : 센터; -webkit-box-align : 중심; / * W3C * / 디스플레이 : 상자; 상자 팩 : 센터; Box-Alight : Center; } #inner { 너비 : 50 %; }
귀하의 유용성에 따르면, 박스 오리엔트, Box-Flex, 박스 방향 속성을 사용할 수도 있습니다.
몸을 풀다:
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
자식 요소 센터링에 대해 자세히 알아보십시오
링크 2 링크 3. 링크 4.
그리고 이것은 상자 모델이 왜 가장 좋은 방법인지 설명합니다.
W3C Box 모델은 왜 더 잘 간주됩니까?
답변
#centered { 위치 : 절대; 왼쪽 : 50 %; 마진 왼쪽 : -100px; }
상위 요소가 위치, 즉 상대, 고정, 절대 또는 끈적 끈적한 지 확인하십시오.
DIV의 너비를 모르는 경우 변환 : TRANSLATEX (-50 %)를 사용할 수 있습니다.부정적인 마진 대신에.
CSS Calc ()를 사용하면 코드가 심지어 더 간단해질 수 있습니다.
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
원리는 여전히 동일합니다.중간에 항목을 넣고 너비를 보상하십시오.
답변
수직 및 가로로 정렬하는 방법을 보여주기 위해이 예제를 만들었습니다.
코드는 기본적으로 다음과 같습니다.
#outer {
position: relative;
}
그리고...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
화면의 크기를 조정하는 경우에도 중심에 머물러있을 것입니다.
답변
일부 포스터는 DISPLAY : BOX를 사용하여 CSS 3 방향을 가운데에 언급했습니다.
이 구문은 구식이며 더 이상 사용해서는 안됩니다.[이 게시물 참조].
따라서 완전성을 위해서는 유연한 박스 레이아웃 모듈을 사용하여 CSS 3의 중심까지의 최신 방법입니다.
그래서 간단한 마크 업이있는 경우 :
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
... 상자 내에 항목을 가운데에두고 싶습니다. 여기에 상위 요소에 필요한 항목 (.Box) :
.box {
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
.상자 { 디스플레이 : 플렉스; 플렉스 랩 : 랩; / * 선택 사항.항목을 랩으로 원하는 경우에만 * / 정당화 내용 : 센터; / * 가로 정렬 용 * / 정렬 항목 : 센터; / * 수직 정렬 용 * / } * { 여백 : 0; 패딩 : 0; } HTML, 신체 { 높이 : 100 %; } .상자 { 높이 : 200px; 디스플레이 : 플렉스; 플렉스 랩 : 랩; 정당화 내용 : 센터; 정렬 항목 : 센터; 테두리 : 2px 단단한 토마토; } .BOX DIV { 마진 : 0 10px; 너비 : 100px; } .Item1 { 높이 : 50px; 배경 : 분홍색; } .Item2 { 배경 : 갈색; 높이 : 100px; } .Item3 { 높이 : 150px; 배경 : 오렌지; }
최근댓글