asp.net - 如何在浏览器的中心显示整个页面

Question

我的内容占位符之外有三个 div

母版页代码:

<div id="content-outer" class="clear">
 <div id="content-wrapper">    
   <div id="content">      
     <asp:ContentPlaceHolder ID = "ContentPlaceHolder1" runat="server" >
      </asp:ContentPlaceHolder>     
   </div>
 </div>
</div>

内容外部div的宽度为1400px，在宽度为1400或更大的屏幕上效果很好，但是当我在宽度为1024的屏幕上运行它时，整个页面从左开始，，，我想居中对齐我的页面在浏览器中打开时，我给出了一些 CSS 属性，例如

内容外:左边距:自动；边距右:自动；(不工作)

但我无法将整个页面居中对齐，请告诉我该怎么做，我也为 body 提供了相同的属性，但还是没有运气

Answer 1

首先，中心标签的使用已被弃用，所以你不应该使用它。

<center>
    Your content here
</center>

您的解决方案(为了清楚起见，我已将 css 内联)

<div style="width: 1400px; margin: 0 auto;">
    Your content here
</div>

是在页面上居中内容的正确方法。

正如您所注意到的，如果屏幕小于您的内容宽度，它似乎不会居中。这是因为页面左侧或右侧没有留出空白的空间，在页面中间启动浏览器滚动条会不一致。

您的选择是:

1. 接受它 - 这是所有居中对齐的网站的工作方式
2. 缩小您网站的宽度以在较小的屏幕上工作(然后在较大的屏幕上会有更大的边距)
3. 让您的设计更加流畅 - 如下例所示

希望这会有所帮助。

<div style="width: auto; margin: 0 10%;">
    Your content here
</div>