래퍼 DIV 100 % 너비 웹 사이트

헤더, 꼬리말, 본문이 모두 페이지의 너비가 100 % 인 웹 사이트를 만들었지 만 모든 콘텐츠가 해상도에 관계없이 페이지의 가운데에 있어야합니다. 나는 래퍼를 사용하려고 시도했으나 그 다음 헤더와 내용은 래퍼의 100 % 너비이고 페이지가 아니다.래퍼 DIV 100 % 너비 웹 사이트

출처

2009-12-02 Keiron Lowe

사지에서 배경색/이미지가 100 % 너비이지만 실제 내용을 가운데로 정렬하고 싶습니다 (너비가 고정되어 있습니까?). 내부 콘텐츠를 중앙에 유지하기 위해 각 항목에 내부 래퍼 div을 사용하는 샘플 코드입니다. 내가 완전히 다른 뭔가를하고 가능성이 html 및 body 요소에 반복 배경을 사용하는 것이 좋습니다 것이지만 귀하의 페이지가 어떻게 생겼는지 모르겠다.

그래서 ..

다음은 작동하지만 때문에 여분의 마크 업의 알람 HTML 순수 주의자는 :

당신은 내가 함께 넣어이 방법 on this sample page의 (슈퍼 추한) 예를 볼 수 있습니다.

CSS :

.wrapper { 
    width: 960px; /* fixed width */ 
    margin: 0 auto; /* center */ 
}

HTML :

<div id="header"> 
    <div class="wrapper"> 
    <h1>My Title</h1> 
    </div> 
</div> 
<div id="content"> 
    <div class="wrapper"> 
    <h2>Sub Title</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
     do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
     nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
</div> 
<div id="footer"> 
    <div class="wrapper"> 
    <p class="credits">Copyright 2009 by Your Company.com, LLC</p> 
    </div> 
</div>

출처

2009-12-02 20:44:00

너비가 지정되지 않으면 div 요소를 사용하여이 작업을 수행 할 수 없습니다.

단지 텍스트

, 당신은

<div style="text-align: center;">text content</div>

출처

2009-12-02 20:31:13

를 사용할 수있는이 당신을 위해 작동합니다 :

CSS의를 :

body { 
background-color: #e1ddd9; 
font-size: 12px; 
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif; 
color:#564b47; 
margin: 20px 140px 20px 140px; 
text-align: center; 
} 
#content { 
width: 100%; 
padding: 0px; 
text-align: left; 
background-color: #fff; 
overflow: auto; 
}

html로이 예

<body> 
<div id="content"> 
<p><b>center</b><br /><br /> 
This BOX ist centered and adjusts itself to the browser window.<br /> 
The height ajusts itself to the content.<br /> 
</div> 
</body>

이 사이트에서 가져 왔습니다. 차 잠시 전에 항상 좋은 간단한 깨끗한 CSS 템플릿을 위해 참조 : 이 http://www.mycelly.com/

출처

2009-12-02 20:34:10 Upgradingdave

이

body { 
    text-align: center; 
    position: relative; 
} 

#content { 
    width: 100%; 
    height: auto; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
}

와 연극을 가지고 그런 다음 HTML에서 나는거야

<html> 
<body> 
<div id="header"></div> 
<div id="content"> 
    <!-- place all of your content inside of here --> 
</div> 
</body> 
</html>

출처

2009-12-02 20:35:02 Matt

@ 매트 폭이 때문에'마진 left'와'마진 right' 의미 아무것도하지 않고'100 %' . –

래퍼 DIV 100 % 너비 웹 사이트

답변

관련 문제