랩으로 웹 사이트의 중심 콘텐츠

Question

나는 일하고있는 웹 사이트가 있습니다. 나는 모든 콘텐츠를 중심에두고 고심하고 있습니다. 헤더 센터가 왜 안되나요?

나는 margin-left와 right : auto의 일반적인 방법을 시도했다. 하지만 작동하지 않아서 다음을 사용했습니다.

<div class="header-wrapper"> 

<div id="wrap"> <!---start wrap 960px---> 

<h1>TITLE</h1> 

<div class="box-full"> 

<h2>Our Cloud Development</h2> 
<p>Welcome to company Feel free to follow us on twitter. We are a new company, focused on business development.</p> 
<div class="button"> 
<a href="class="learnmore">Learn More</a> 
</div> 

</div> 
</div> 
</div> <!---end wrap 960px---> 

오른쪽으로 밀고 있습니다.

Answer 1

.box-full<div>에 960 픽셀의 너비를 지정했습니다. 패딩을 지정 했으므로 960 픽셀 래퍼 이상으로 확장됩니다.

변경에 폭 : 960-30-30 = 900 : 귀하의 사이트에

.box-full { 
    background: none repeat scroll 0 0 #F2F2F2; 
    border: 1px solid #CCCCCC; 
    border-radius: 7px 7px 7px 7px; 
    clear: both; 
    left: 0; 
    margin: 1cm auto 0; 
    padding: 30px; 
    position: relative; 
    text-align: center; 
    width: 900px; 
} 

Answer 2

는 div#wrap 요소는 실제로 넓은 900px 아니라 960입니다. 그 점을 고려할 때, div는 실제로 중심에 위치합니다. 이 보이지 않게하는 것은 요소의 너비가 1022 픽셀 (960 + 30 (왼쪽 패딩 - 오른쪽) + 30 (패딩 오른쪽) + 2 (왼쪽 및 오른쪽 테두리)) = 1022입니다. 그 너비는 .box-full이며 898px으로 설정하면 제대로 보이는지 확인하십시오.