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

发布于 2024-08-18 19:27:02 字数 593 浏览 6 评论 0原文

我在 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 的屏幕中运行它时，整个页面从左侧开始， ,,我想在浏览器中打开时居中对齐我的页面，我给出了一些 css 属性，例如

content-outer：左边距：自动； margin-right:auto;（不起作用）

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

原文

i have three divs outside my contentplaceholder

masterpage code:

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

the width of content outer div is 1400px,it works well in the screen whose width is 1400 or more but when i run it in the scree of width 1024, the whole page starts from left,,,i want to center align my page when open in the browser,i have given some css properties like

content-outer:
margin-left:auto;
margin-right:auto;(not working)

but i m not able to center align my whole page,,,plz tell me how can i do that,,i have also given the same properties for body but again no luck

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痕至 2024-08-25 19:27:02

首先，中心标签的使用已被弃用，因此您不应该使用它。

<center>
    Your content here
</center>

您的解决方案（为了清楚起见，我将 css 内联）

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

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

正如您所注意到的，如果屏幕小于内容宽度，它看起来不会居中。这是因为页面左侧或右侧没有足够的边距空间，并且在页面中间启动浏览器滚动条会不一致。

您的选择是：

接受它 - 这是所有居中对齐网站的工作方式
减少网站的宽度以在较小的屏幕上工作（然后在较大的屏幕上将有更大的边距）
让您的设计更加流畅 - 就像下面的示例

希望这有帮助。

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

Firstly, the use of the center tag has been deprecated, so you shouldn't use it.

<center>
    Your content here
</center>

Your solution of (I've put the css inline for clarity)

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

Is the correct method of centering content on a page.

As you have noticed, if the screen is smaller than your content width, it doesn't appear to be centered. This is because there is no space for a margin on the left or right of the page and it would be inconsistent to start the browser scrollbar in the middle of the page.

Your options are:

Live with it - it's how all center-aligned websites work
Reduce the width of your website to work on smaller screens (it will then have a larger margin on larger screens)
Make your design more fluid - like the example below

Hope this helps.

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

回复收藏 0 原文

南渊 2024-08-25 19:27:02

只是玩以下风格

<body> 
 <div id="divMain"> 
  ... 
 </div> 
</body> 


body 
{ 
 margin: 0; 
 padding: 0; 
 text-align: center; 
} 
#divMain
{ 
 margin: 0 auto; 
 padding: 0; 
 width: 1024px; 
 text-align: left; 
} 



or

.divMain
{
position: absolute;
left: 10%;
width: 80%;
}

just playaround with following styles

<body> 
 <div id="divMain"> 
  ... 
 </div> 
</body> 


body 
{ 
 margin: 0; 
 padding: 0; 
 text-align: center; 
} 
#divMain
{ 
 margin: 0 auto; 
 padding: 0; 
 width: 1024px; 
 text-align: left; 
} 



or

.divMain
{
position: absolute;
left: 10%;
width: 80%;
}

回复收藏 0 原文

~没有更多了~