CSS를 사용하여 <div>
다른 것을 수평으로 가운데에 <div>
맞출 수 있습니까?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
답변
이 CSS를 내부에 적용 할 수 있습니다 <div>
.
#inner {
width: 50%;
margin: 0 auto;
}
물론, 당신은을 설정할 필요가 없습니다 width
에 50%
. 포함보다 작은 너비 <div>
가 작동합니다. 는 margin: 0 auto
실제 중심을 무엇이다.
Internet Explorer 8 이상을 대상으로 하는 경우이를 대신하는 것이 좋습니다.
#inner {
display: table;
margin: 0 auto;
}
내부 요소를 수평으로 만들고 특정 설정하지 않고 작동합니다 width
.
실제 예 :
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
답변
내부에 고정 너비를 설정하지 않으려면 div
다음과 같이 할 수 있습니다.
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
내부 div
를 인라인 요소로 만들어 중심에 맞출 수 있습니다 text-align
.
답변
가장 좋은 방법은 CSS 3 입니다.
박스 모델 :
#outer {
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#inner {
width: 50%;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
유용성에 따라 box-orient, box-flex, box-direction
속성을 사용할 수도 있습니다 .
플렉스 :
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
자식 요소의 중심에 대해 자세히 알아보십시오
그리고 이것은 박스 모델이 가장 좋은 접근법 인 이유를 설명합니다 .
답변
div의 너비가 200 픽셀이라고 가정합니다.
.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
반드시 부모 요소가되어 있는지 확인 위치 상대적, 고정, 절대 또는 고정 .
div의 너비를 모르는 경우 사용할 수 있습니다 transform:translateX(-50%);
경우 음수 여백 대신 .
https://jsfiddle.net/gjvfxxdj/
와 CSS의 CALC () , 코드도 간단하게 얻을 수 있습니다 :
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
원리는 여전히 동일합니다. 항목을 중간에 놓고 너비를 보정하십시오.
답변
이 예제 를 작성 하여 세로 및 가로 방법을 보여줍니다 align
.
코드는 기본적으로 다음과 같습니다.
#outer {
position: relative;
}
과…
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
그리고 화면 크기center
를 조정할 때도 그대로 유지됩니다 .
답변
일부 포스터는 CSS 3을 사용하여 중심에 맞추는 방법을 언급했습니다 display:box
.
이 구문은 오래되어 더 이상 사용해서는 안됩니다. [ 이 게시물 참조 ] .
완전 함을 위해 여기에 Flexible Box Layout Module을 사용하여 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 */
}
flexbox에 이전 구문을 사용하는 구형 브라우저를 지원 해야하는 경우 여기에 있습니다. 를 살펴보십시오.
답변
고정 너비를 설정하지 않고 여분의 여백을 원하지 않으면 추가하십시오. display: inline-block
요소에 하십시오.
당신이 사용할 수있는:
#element {
display: table;
margin: 0 auto;
}