这是制作最大宽度和居中的最佳方法吗?

时间:2012-06-18 18:36:06

标签: css

我希望网页的内容居中,最大宽度为900px。

从我的研究和测试来看,这似乎是这样做的方式,但我想确认一下:

<body style="max-width:900px; text-align:center;margin-left:auto ;margin-right:auto">

显然,你将样式放在CSS中。

我认为任何拥有大屏幕的人都会有一个相当新的浏览器。

5 个答案:

答案 0 :(得分:37)

为什么要使用包装,除非你需要它?我不会因为你可以包装东西,它会加起来。此外,如果需要,可以将Body标签用作“自由包装器”:

CSS:

html {
    margin:    0 auto;
    max-width: 900px;
}
body
{
    /* whatever you want */
}        

答案 1 :(得分:18)

CSS:

body { width: 100%; text-align: center; }
#centerContainer { width: 900px; text-align: left; margin: 0px auto; }

HTML:

<body>
  <div id="centerContainer">Content</div>
</body>

答案 2 :(得分:2)

我这样做的方法是创建一个包装器div,它将把你的内容保存在页面上。

CSS:

#wrapper{margin:0 auto; width:900px;}

HTML:

<div id="wrapper>

<!--content goes here-->

</div> <!--/wrapper-->

答案 3 :(得分:2)

我建议将<body>作为包装容器,而不是让<div> 居中width: 900px


HTML:

<body>
   <div id="container">

   **Your Contents**

   </div>
</body>

CSS:

body{
   width: 100%;
}
#container {
   width: 900px;
   margin: 0 auto;
}

答案 4 :(得分:1)

而不是在身体上做,我会创建一个“包装”div并以这种方式设计它:

<div style="width: 900px; margin: auto;">Content</div>