절대 포지셔닝을 중심으로 CSS가 도움이 필요합니다
https://stackoverflow.com/questions/1034449
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 웹 페이지에서 콘텐츠를 중심하는 다양한 솔루션에 완전히 만족하지 못했습니다. 그만큼 <center> 18 세기 중반에 태그가 더 이상 사용되지 않았지만 합리적인 대안을 보지 못했습니다. 구체적으로 내가 원하는 것은 중앙에있는 부모 div를 갖는 것입니다.
Window를 사용하지 않고 이것을 달성 할 수있는 방법이 있습니까? 그것은 상당히 간단한 아이디어처럼 보입니다 ... 나는 절대적으로 배치를 원합니다. 나는 단지 0,0 좌표가 브라우저 창의 왼쪽 상단 코너 이외의 다른 것과 관련이 있기를 원합니다.
지금, 내가하는 일은 콘텐츠를 중심으로 한 다음 상대적인 위치를 가지고 국수를 중심으로 한 DIV를 설정하는 것이지만, 상대적인 물체가 내가 원하지 않는 방식으로 서로를 계속 밀고 있기 때문에 매우 지루합니다.
이것에 대한 모든 생각은 크게 감사했습니다.
해결책
이것이 당신이 찾고있는 것입니까?
<div style=" position: absolute;
display: inline-block;
top: 20%;
bottom: 20%;
right: 20%;
left: 20%;
background-color: #434154;
text-align: center;">
<div style="display: inline-block;
height: 100%;
vertical-align: middle;"></div>
<div style="position: relative;
color: #FFFFFF;
background-color: #546354;
display: inline-block;
vertical-align: middle;">
THIS IS CENTERED WITHOUT SCRIPTING :D
</div>
</div>
다른 팁
body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }
예제 코드이지만 .Child 요소는 래퍼의 0,0입니다.
절대적으로 배치 된 요소는 가장 가까운 위치 관계 부모에 절대적으로 위치합니다. 요소에 친척이있는 부모가없는 경우 문서 만 사용합니다. 아래는 클래스가없는 예입니다 (명확성을 위해 일부 색상 및 너비 스타일이 추가됨).
<html>
<body style="text-align: center;">
<div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
<div style="position: absolute; left: 0; top: 0;">
This will absolutely position relative to the container div.
</div>
</div>
<div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
This will absolutely position relative to the document
</div>
</body>
</html>
당신이 고집하고 있다면 position: absolute; 그런 다음 위치에 위치한 물건을 갖기를 원하는 DIV를 설정하십시오. position: relative; 어린이 요소의 위치에 대한 위치로 만들기 위해.
절대적으로 배치 된 div를 중심으로 너비는 폭을 알고 다음 CSS를 사용해야합니다.
#wrapper {
width: 800px;
margin: 0 auto;
position: relative; /* creates a positioning context for child elements */
}
#child {
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px;
}
그리고 HTML :
<div id="wrapper">
<div id="child">
....
</div>
</div>
필요할 때 너비와 왼쪽 여백을 조정할 수 있습니다 (음의 왼쪽 여백은 중심을 중심으로하는 Div의 너비의 절반이어야합니다. #child.
다른 사람들이 사용하는 것처럼 margin: 0 auto; 너비가 설정된 요소에서는 중앙에 있습니다.
중앙에있는 좋은 방법은 "마진 : 자동"CSS 태그를 사용하는 것입니다. 이것은 FF와 Safari에서 작동합니다. div에 약간의 너비와 마진 자동을 제공하고, 부모의 너비가 100% 인 경우,이 div는 중심이 정렬됩니다.
이것이 IE에서 작동하기 위해서는 부모의 텍스트-정렬 : 중심 속성을 사용한 다음 실제 중심 Div에 남은 텍스트 정렬을 사용해야합니다.
Afaik, 절대 좌표를 0,0에서 다른 중재 지점으로 변경할 방법은 없습니다. 친척은 갈 길입니다.
어쩌면 나는 그 과제를 이해하지 못했지만 당신이 사용할 수 있다고 생각합니다
margin: 0 auto;
당신의 div를 중심으로
부모에게 상대적 위치를 사용하고 동일한 요소를 속성과 제공하십시오.
margin: 0 auto;
부모는 이제 배치되어 있으며 요소를 절대적으로 설정할 수 있어야합니다.
예시:
div#page{
position:relative;
width:400px;
margin:0 auto;
}
div#page #absoluteExample{
position:absolute;
top:18px;
left:100px;
}
가장 쉬운 방법 :
#element {
position: absolute; /*Absolute Position*/
top: 0;
left: 0; /*Set the 4 coordinates to zero*/
bottom: 0;
right: 0;
margin: auto; /*Margin to Auto*/
height: 150px; /*Set the Height and Width*/
width:150px;
background:green; /* Backgroung:optional*/
}
이것은 크기에 관계없이 중간에 바로 가져옵니다.
도움이되기를 바랍니다!
바이올린 참조 : http://jsfiddle.net/kfpc6/
0,0이 DIV와 관련이 있다면 상대 위치를 원하지 않습니까?
그만큼 text-align: center; 재산은 무엇을합니다 <center> 익숙하고 그것보다 훨씬 우수합니다.
유일한 것은 사용하기가 조금 더 복잡하다는 것입니다. 일단 당신이 그것을 매달린 후에, 당신은 왜 당신이 왜 그렇게 많은 문제를 겪고 있는지 궁금합니다!
페이지의 다른 요소의 속성과 조정하여 사용해야합니다. 이것이 바로 개발자/디자이너가 CSS 및 최신 HTML 기술과 관련된 문제입니다. 그것은 우리에게 페이지 요소를 제시하는 강력한 방법을 제공하지만 훨씬 더 복잡하고 엄격합니다.
Mike Robinson의 답변은 확실히 여기에있는 문제를 해결하며 훌륭한 예입니다. 하지만...
나는 어떤 대답도 당신에게 사용 방법을 보여줄 것이라고 생각하지 않습니다. text-align 모든 경우에 적절하게 만날 수 있지만 CSS의 포지셔닝이 어떻게 더 심층적으로 작동하는지 살펴보십시오.
