使用CSS将文档居中放置在固定宽度的布局中

固定宽度的布局可能很难与一些流行的浏览器集中在一起,但只需几行代码就可以实现。

这里的如何

  1. 在HTML编辑器中用CSS样式表创建一个新的Web页面。
  2. 创建一个div元素作为页面上的主要元素,您将在页面上存储所有内容。
  3. 给该div元素一个在页面上唯一的ID。
  4. 打开你的CSS样式表并设置div元素的宽度。 div#main {width:750px; }
  5. 添加自动页边距以居中您的div。 div#main {width:750px; margin-left:auto; margin-right:auto}
  6. 要修复它为Netscape 4和IE 4 - 6( 怪癖模式 )添加一个文本对齐的身体。 body {text-align:center; }
  7. 但是所有的文本都是居中的,所以通过添加text-align:left来重新对齐#main div中的文本。 在那里。 div#main {width:750px; margin-left:auto; margin-right:auto; text-align:left; }
  8. 保存你的页面和你的样式表。
  9. 在几个Web浏览器中测试。

小费

这将使布局框居中,但不包含其内容。 使用文本对齐来居中内部内容。