css margin:最大化/全屏时，自动不在webkit浏览器(Chrome和Safari)中使div居中 [英] css margin:auto not centering div in webkit browsers (Chrome and Safari) when maximised/full screen

问题描述

我无法确定导致此问题的原因，因此无法显示测试用例， 取而代之的是，我将代码范围缩小到仍然包含错误的页面，而没有太多额外的内容.
这是链接:
http://www.richard-walsh.limewebs.com/Disk-Edits /index.html

I have been unable to determine the cause of this problem, so I can not display a test case, instead I have narrowed down my code to a page that still contains the fault without too much extra.
Here is the link:
http://www.richard-walsh.limewebs.com/Disk-Edits/index.html

问题是内容div(id = content)不在Chrome和Safari中居中.
它位于右侧.

The problem is that the content div (id=content), is not centering in Chrome and Safari.
It is positioned to the right.

内容div被一个称为bottom的div包围，其宽度为100％；和高度:自动；.

The content div is surrounded by a div called bottom, whose width:100%; and height:auto;.

#bottom{
    width:100%;
    height:auto;
    padding:0px;
    margin:0px;
}

#content{
    width:862.4px;
    height:402px;
    margin:auto;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    background-color:#030303;
    background-image:url(images/main.png);
    -moz-border-radius:15px;
    border-radius:15px;
    border-style:solid;
    border-color:#181818;
    border-width:4px;
    margin-top:60px;
    -moz-box-shadow: 1px 1px 20px 4px black;
    -webkit-box-shadow: 1px 1px 20px 4px black;
    box-shadow: 1px 1px 20px 4px black;
    overflow:hidden;
}

我发现，如果我从内容css中删除了overflow:hidden，那么它将正确居中. 但是我需要这个(对于链接中未显示的部分)

I have found that if I remove overflow:hidden from the content css then it centers correctly. But I need this (for parts not shown in the link)

我还发现，如果我完全删除菜单，它会起作用. 因此，我认为菜单css中一定有导致这种情况的原因. 在Firefox(4)中可以正常工作.

I have also found that it works if I remove the menu entirely. So I think that there must be something in the menu css that has caused this. It works fine in Firefox(4).

我正在运行Chrome 11.0.696.68 和Safari 5.0.5

I'm running Chrome 11.0.696.68 and Safari 5.0.5

哦！我刚刚注意到，只有在Chrome最大化的情况下才会发生这种情况，即使它处于窗口模式"(由于缺少更好的名称)，即使窗口拉伸到了屏幕的整个尺寸，它也可以完美地居中.

Oh! I have just noticed that this only happens when Chrome is maximised, when it is in 'window mode' (for lack of a better name) it centers perfectly, even if the window is stretched to the full size of the screen.

我还注意到，如果删除#copyright，则#content会显示在左侧，如果#copyright和#choice都被删除，则内容div会显示在中间，如果只删除#choice，仍在右侧渲染.

I have also noticed that if you remove #copyright, then #content is rendered on the left, and if both #copyright and #choice is removed then the content div renders in the centre, and if you only remove #choice it still renders on the right.

如果您删除#menu_all，则它会正确居中.

If you remove #menu_all then it centers correctly.

任何帮助将不胜感激，
谢谢

Any help would be much appreciated,
Thanks

推荐答案

解决方案:
内容div(#copyright)上方的div没有声明高度值. 声明高度值(35像素)可解决我在chrome/safari中遇到的问题.

The solution:
The div above the content div (#copyright) did not have a height value declared. Declaring a height value (of 35px) fixed the problem I was having in chrome/safari.

height:auto;没用.

height:auto; did not work.

这不能解释为什么将内容div直接放置在版权div下方时起作用的原因. 但是还是. 这是一个可行的解决方案. 因此，如果您遇到类似的问题，请检查上面的div是否声明了高度.

This does not explain why when the content div was placed directly below the copyright div it worked. But still. It was a workable solution. So if you're have a similar problem then check that the div above has a height declared.

这篇关于css margin:最大化/全屏时，自动不在webkit浏览器(Chrome和Safari)中使div居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！