网页中心内容

Posted 2023-03-06

技术标签:

【中文标题】网页中心内容【英文标题】：Center contents of webpage 【发布时间】：2010-10-27 07:26:02 【问题描述】：

我想将网页的文本和内容“居中”。现在我不想将文本对齐到中心，我仍然想要左对齐，但我想要左右两边的边距很大，这样所有东西看起来都相对居中。你能告诉我实现这一目标的 html/CSS 吗？谢谢。

【问题讨论】：

【参考方案1】：

<html>
<head>
<style type="text/css">

body 
   text-align: center; /* Center in IE */


#content 
   text-align: left; /* reset text-align for IE */
   margin: 0 auto; /* Center in other browsers */
   width: 800px;


html 
   overflow: -moz-scrollbars-vertical; /* Force vertical scrollbar in FF */


</head>
<body>
<div id="content">

   content here

</div>
</body>
</html>

*更新：我添加了一些 CSS，根据下面的一些 cmets 在 FF 中强制垂直滚动条。

【讨论】：

最好把 text-align: center;在另一个包含 div 的情况下，如果您使用的是所见即所得的编辑器，它将使您的所有文本在编辑器中居中。 +1 因为我同意——我只是为提问者提供了最简单的例子，但实际上我会按照你的建议做。这个很好用，但是有一个小问题。我已经将它应用于我的所有页面，似乎对于某些页面，它们略微向左/向右移动。当我的菜单栏从一个页面移动到另一个页面时，这会分散注意力。看起来内容/文本可以填充页面宽度的页面将比其他几乎是空的页面有一个更“左”的中心。看起来有大约 30 个像素偏移吗？可能是因为当内容超出页面时，滚动条在 FF 中出现和消失。【参考方案2】：

CSS：

#container 
    max-width: 800px;
    margin: 0 auto;

在 HTML 中，将所有内容包装在：

<div id='container'>
...
</div>

（请注意，这个答案与 meep 的不同之处在于，我使用 max-width 提供低于 800 像素的流畅布局，而他使用 width 提供固定布局。）

【讨论】：

...除了大多数版本的 IE 不知道“最大宽度”是什么。 IE7 及以上版本。对于 IE6，这里有一篇关于如何实现相同功能的优秀文章：javascript.about.com/library/blwidth.htm【参考方案3】：

有一个容器 div，您可以在其中放置所有内容：

<html>
<head>
    <title>a sample</title>
</head>
<body>
    <div id="container">
         <h1>this is it</h1>
         <p>all content goes here</p>
    </div>
</body>

然后添加一些 css 指定容器 div 的宽度和边距：

#container 
    width: 750px;
    margin: 0 auto;

【讨论】：

【参考方案4】：

试试

#div 
  margin:0 auto
;

【讨论】：

【参考方案5】：

在您的页面上创建 3 列。您的所有文本都位于中心列，并且可以左对齐。

在这里查看示例http://matthewjamestaylor.com/blog/perfect-3-column.htm

【讨论】：

【参考方案6】：

我相信this 可能会对您有所帮助。

【讨论】：

【参考方案7】：

#wrapper 
    width: 800px;
    margin: 0 auto; 
 

<div id="wrapper">
     <p>This will appear in a centered container</p>
</div>

【讨论】：

在某些浏览器中，例如 IE，这是行不通的。您将不得不添加另一个 div 包装 #wrapper 将 text-align 设置为居中。然后在#wrapper 中，您应该再次将 text-align 设置为向左。我从来没有遇到过这个问题？我在我制作的每个网页上都使用了那段代码。使用 XHTML 文档类型。如果您看到：dev.korebogen.dk - 它在所有浏览器中居中。而 CSS 只是 #wrapper width: 960px;边距：0 自动；好吧 - 也许它不会在 IE5 中居中 - 但见鬼，谁在使用它？ :-)

以上是关于网页中心内容的主要内容，如果未能解决你的问题，请参考以下文章