如何在浏览器中心显示整个页面

Question

我的contentplaceholder外面有三个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的scree中运行它时,整个页面从左边开始,,,我想在中心对齐我的页面时在浏览器中打开,我给了一些css属性

content-outer:margin-left:auto; margin-right:auto;(不工作)

但我无法居中对齐我的整个页面,,,请告诉我,我怎么能这样做,我也给了身体相同的属性,但再次没有运气

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>