如何设置网页在不同屏幕分辨率下自动对齐？

Question

我正在 ASP.NET 上创建一个项目，分辨率为 1280x800。我使用的网页宽度 1245px 在我的系统上运行得非常好，但是当我在分辨率 1024x768 上使用该网站时，对齐就会消失浏览器的。我使用的是

宽度 1245px，在 1280x800 的分辨率下看起来不错。
我尝试了这段代码，但它给了我错误。

protected void Page_Load(object sender, EventArgs e)
    {
        div1.Style.Add(HtmlTextWriterStyle.Width, System.Windows.Forms.Screen.PrimaryScreen.Bounds.Width.ToString());
    }

它给出的错误是

命名空间中不存在类型或命名空间名称“Windows” “系统”（您是否缺少程序集引用？）`

那么有没有简单的方法来修复它。

Answer 1

屏幕分辨率的问题在于，除非您尝试追求圣杯并使用液体布局（a ** 中的痛苦），否则您实际上无法真正本地支持不同的屏幕分辨率。我想你可以使用很多花哨的 javascript，但是......哎呀......维护噩梦......而且它会让你的页面陷入困境。

您应该将网站设置为仅在假定的 1024 x 768 窗口中显示内容，因为这是迄今为止最常见的屏幕尺寸。

实现此目的的一般方法是使用自动边距将 1024x768 的 div 居中，以便其余部分只是额外的空白。

<div id="MainContainer">
My content here
</div>

  #MainContainer
  {
      width: 1024px;
      height: 768px;
      margin: auto;
  }

这无法解决内容垂直居中的问题。我更喜欢的一种方法是使用绝对定位，这样居中就不再是一个因素。我可以使用以下 css 将页面设置为拉伸以适应窗口的大小：

  #MainContainer
  {
      position: absolute;
      top: 0;
      bottom: 0;

      width: 1024px;
      height: 768px;
      margin: auto;
  }

这将导致 div 从窗口顶部拉伸到底部。
我喜欢这个解决方案，因为它受到大多数浏览器及其各种版本的支持，甚至可以很好地处理缩放。