html页面对齐问题

Posted 2023-02-26

【中文标题】html页面对齐问题

【英文标题】：html page alignment issue

【发布时间】：2009-12-21 16:28:03

【问题描述】：

我正在 Windows 平台上开发一个 html 页面。我发现当浏览器（显示）的分辨率（或大小，以像素为单位）大于页面大小时，页面将对齐到浏览器的左侧，我想将页面对齐到中心（中间）页面大小小于浏览器时的浏览器。

任何想法如何实现这一点以及如何找到左对齐的根本原因？ html页面很大，不方便在这里粘贴html代码。

提前致谢， 乔治

【参考方案1】：

首先，您需要将页面内容包装在一个块中（该块将居中）：

<div id="body">
    <!-- your page content here -->
</div>

然后您需要将其设置为居中。由于 Firefox 和 IE 处理块居中的方式略有不同，您必须做两件事才能使块居中。

1。将 body 设置为所有内容居中（对于 IE）：

body 
    text-align: center;

2。将内部块的左右边距设置为“自动”；和

3。由于居中文本会继承其子节点，因此您希望将其设置回左对齐（除非您确实希望所有文本都居中......等等！）：

#body 
    margin: 0px auto;
    text-align: left;
    width: 800px; /* set this width to how wide you want your content to be */

【参考方案2】：

任何想法如何实现这个和

http://dorward.me.uk/www/centre/

如何找到左对齐的根本原因？

...因为这是默认设置。

【讨论】：

我发现 IE 和 Firefox 有同样的问题，你的意思是 IE 和 Firefox 都保留默认对齐方式？

在您推荐的文档中，它提到了如何使其以特定元素为中心，例如

您将所有内容包装在一个元素（例如 div）中并将其居中。

【参考方案3】：

<style>
body

    width:800px;
    margin:auto;

</style>

【讨论】：

我没有在您的代码 sn-p 中找到任何处理对齐的代码？

在 CSS 中，将元素的左右边距设置为“自动”会导致该元素在其包含块内居中。

谢谢！我的 html 页面包含很多母版页（遗留代码），我不想过多地触及它们。您能否向我推荐一种安全有效的方法来使页面居中对齐，而无需触摸这些母版页？ :-)

某些版本的 Internet Explorer（7 和更低的 IIRC）不允许您在 body 元素上设置宽度。

【参考方案4】：

您只需在正文中添加 text-align: center; 即可覆盖旧版浏览器并添加：

text-align: left;
margin: 0 auto;

到您的第一个容器 div ...这将在所有浏览器中水平居中，无论多旧。

【讨论】：

为什么我需要同时添加 text-align: center;和文本对齐：左;？

文本对齐：居中； on body 是将页面上的所有内容居中对齐...因此，您需要在容器 div 中覆盖它，以便保留图像/正文副本等的默认位置，因为它会很自然。

1.您的意思是将“text-align：center”添加到body元素并添加“text-align：left;”到其他div？ 2. 我的 html 页面包含很多母版页（遗留代码），我不想过多地接触它们。您能否向我推荐一种安全有效的方法来使页面居中对齐，而无需触摸这些母版页？ :-)

是的，这就是我的意思......没有其他方法......这就是对齐页面的方式。对不起。