가능한 중복 :
CSS Centering a div in different Screens화면 중앙에 컨테이너를 배치하는 방법은 무엇입니까?
나는이 질문에 대한 대답은 정말 간단 추정하지만 난 난처한 상황에 빠진입니다.
웹 사이트를 Guardian 웹 사이트 (http://www.guardian.co.uk/)와 같이 화면 중앙에 배치하려고합니다. 나는 왼쪽과 오른쪽 테두리를 사용하는 것이 옳다고 생각했지만, 이것은 footer를 배치하는 것을 어렵게 만들었습니다.
보호자 웹 사이트를보고 firefox inspect 요소 기능을 사용하면 화면의 왼쪽과 오른쪽에 아무 div도 사용하지 않는 것으로 보입니다. 사실 컨테이너가 화면 중간에있는 것처럼 보입니다.
내 질문에 가정합니다. 용기를 어떻게 배치합니까?
.container {
/* remember to set a width */
margin-right: auto;
margin-left: auto;
}
것입니다 여백 속성 및 사용 속기는 :
margin: 0 auto;
이 0으로 상단 & 아래쪽 여백을 설정합니다, 그리고 바로 자동으로 &을 떠났다.
빠른 방법은 다음과 같습니다 http://jsfiddle.net/d9yBs/
또한 2에 결합 할 수 있습니다 :
#container
{
position: absolute;
left: 50%;
top: 50%;
height: 200px;
margin-top: -100px /* half of you height */
width: 400px;
margin-left: -200px /* half of you width */
}
전용 단지를 중심으로하는 또 다른 방법은 바이올린
#container
{
width: 400px;
margin-left: auto;
margin-right: auto;
}
이 시도 :
이CSS :
이.page {
width: 200px;
background: #FF0000;
margin: auto;
}
HTML :
또한<div class="page">
This is the content.
</div>
이 jsFiddle를 확인!
나는 이것이 당신이 원하는 것이라고 생각합니다.링크 : 나는 position 기억으로 지금까지
div.InSkinAlignCenter {
margin: 0 auto;
}
: 보호자의 사이트에서
margin: 0 auto;
:http://codepen.io/anon/pen/Ihzxp
그것은 CSS와 단지 트릭이 https://stackoverflow.com/a/14401391/1278540
에 따라 속성은로 설정되어야합니다.
HTML
<body>
<div class="page_wrap">
</div>
</body>
CSS
.page_wrap
{
border:1px solid black;
width:250px;
height:100px;
margin-left:auto;
margin-right:auto;
}
body
{
text-align:center; /* required by some browsers */
}
http://jsfiddle.net/pc7AY/을 확인하십시오.
thats 올바른 방법, 위치 : 상대적으로 마진을 사용하여 매우 중요합니다 ... –
고마워요. – Hector