div 태그에 다음 CSS를 적용했다고 가정 해 보겠습니다.
.divtagABS {
position: absolute;
margin-left: auto;
margin-right:auto;
}
margin-left 및 margin-right가 적용되지 않습니다.
그러나 친척이 있으면 잘 작동합니다.
,divtagREL {
position: relative;
margin-left: auto;
margin-right:auto;
}
왜 그런 겁니까? 요소를 중앙에 배치하고 싶습니다.
누군가 절대 위치에서 여백을 자동으로 설정하는 것이 작동하지 않는 이유를 설명 할 수 있습니까?
답변
편집 :이 대답은 절대적으로 배치 된 요소를 중앙에 배치 할 수 없다고 주장하는 데 사용 margin: auto;되었지만 이것은 사실이 아닙니다. 이것이 가장 많이 찬성되고 받아 들여지는 답변이기 때문에 나는 그것을 옳게 바꾸는 것이라고 생각했습니다.
다음 CSS를 요소에 적용 할 때
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
그런 다음 요소에 고정 된 너비와 높이 (예 : 200px 또는 40 %)를 지정하면 요소 가 중앙에 배치됩니다.
여기 바이올린 효과를 보여줍니다.
답변
나는 한 절대적 위치 요소의 중심이 트릭을 사용 . 하지만 요소의 너비를 알아야합니다.
.divtagABS {
width: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
}
기본적으로 left : 50 %를 사용한 다음 음의 여백을 사용하여 너비의 절반을 되돌립니다.
답변
절대 요소에 너비가 있으면 아래 코드를 사용할 수 있습니다.
.divtagABS{
width:300px;
positon:absolute;
left:0;
right:0;
margin:0 auto;
}
답변
아래 JSFiddle 작업.
절대 위치를 사용할 때 margin: 0 auto작동하지 않지만 다음과 같이 할 수 있습니다 (크기도 조정됩니다).
left: 50%;
transform: translateX(-50%);
업데이트 : 작업 JSFiddle
답변
나는 이미 이와 같은 문제가 있었고 컨테이너 (.divtagABS-container, 귀하의 경우)를 절대적으로 배치 한 다음 상대적으로 그 안에 콘텐츠를 배치하는 솔루션 (귀하의 경우 .divtagABS)을 얻었습니다.
끝난! 이제 .divtagABS에 대한 margin-left 및 margin-right AUTO가 작동합니다.
답변
모든 답변은 제안 된 솔루션 또는 해결 방법 일뿐입니다. 그러나 여전히 질문에 대한 답을 얻지 못했습니다. margin : auto는 position : relative에서는 작동하지만 position : absolute에서는 작동하지 않습니다.
다음 설명이 도움이되었습니다.
“절대 위치 요소에서는 여백이 거의 의미가 없습니다. 이러한 요소는 정상적인 흐름에서 제거되므로 페이지의 다른 요소를 밀어 낼 수 없습니다 . 이와 같은 여백을 사용하면 여백이 적용되는 요소의 배치에만 영향을 줄 수 있습니다. 다른 요소가 아닙니다. ”
http://www.justskins.com/forums/css-margins-and-absolute-82168.html
답변
요소가 절대 위치이면 상대적이 아니거나 페이지 자체를 포함하여 모든 개체를 참조하지 않습니다. 그래서 margin: auto;중간이 어디에 있는지 결정할 수 없습니다.
명시 적으로 알려지기를 기다리고, 사용 left하고 top위치를 지정합니다.
javascript 또는 일부를 사용하여 프로그래밍 방식으로 중앙에 계속 배치 할 수 있습니다.
