我正在为一个新的小项目编写一些模板 - 我只是想知道一件事情：
如果我希望我的整个页面内容位于居中的列中，宽度为800px，那么通常的做法是这样的（至少，这是我一直这样做的方式）：
<html> <head> <style> body { text-align: center; /* IE6 */ } #wrapper { margin: 0px auto; width: 800px; background-color: #eee; /* to see it better */ text-align: left; /* IE6 */ } </style> </head> <body> <div id="wrapper"> ... content ... </div> </body> </html>现在，还有另一种方法可以完成同样的事情，但margin: -50%; （或者固定值，在这种情况下， margin: 400px; ），如下所示：
<html> <head> <style> body { margin-left: 50%; } #wrapper { margin-left: -400px; width: 800px; background-color: #eee; /* to see it better */ } </style> </head> <body> <div id="wrapper"> ... content ... </div> </body> </html>我的问题是 - 这两种方法中的一种比其他方法有什么优势？ 还是缺点？ 是否有一个共同的“最佳解决方案”，用于对齐主列？
I'm about to write some templates for a new little Project - and I just wondered about one thing:
If I want my whole page content to be inside a centered column, with - lets say - 800px width, the usual way of doing that would be this (at least, this is the way I always did it):
<html> <head> <style> body { text-align: center; /* IE6 */ } #wrapper { margin: 0px auto; width: 800px; background-color: #eee; /* to see it better */ text-align: left; /* IE6 */ } </style> </head> <body> <div id="wrapper"> ... content ... </div> </body> </html>Now, there is another method to do exactly the same thing, but with margin: -50%; (or a fixed value, in this case margin: 400px;), like this:
<html> <head> <style> body { margin-left: 50%; } #wrapper { margin-left: -400px; width: 800px; background-color: #eee; /* to see it better */ } </style> </head> <body> <div id="wrapper"> ... content ... </div> </body> </html>My question is - does one of this two methods have any advantages over the other? Or disadvantages? Is there a common 'best solution' for centering a main column?
最满意答案
margin:0 auto; 将确保元素两侧有相等的空间量。
margin-left:50%; 是相对于父母的。 例如，如果容器宽度为1000px，则子元素上的左边距为500px。 但是，这不会将元素居中，它会将其放在中间的左侧 - 除非您像在您的示例中那样在子元素上使用固定值进行破解。
通常，当你在处理一个包装，就像你的情况一样， margin:0 auto; 是最简单和最灵活的解决方案。 在其他情况下，您可能会发现使用百分比或固定值更好（例如，浮动时）。
margin:0 auto; will make sure there are equal amounts of space on either side of the element.
margin-left:50%; is relative to the parent. For example, if the container is 1000px wide, you will have a left margin of 500px on the child element. However, that will not center the element, it will place it's left side in the middle — unless you hack it with a fixed value on the child element as in your example.
Usually, when you are dealing with a wrapper as in your case, margin:0 auto; is the simplest and most flexible solution. In other cases, you might find it better to use a percentage or fixed value (for example, when floating stuff).
保证金：0px汽车VS保证金：-50％(margin: 0px auto VS margin: -50%)我正在为一个新的小项目编写一些模板 - 我只是想知道一件事情：
如果我希望我的整个页面内容位于居中的列中，宽度为800px，那么通常的做法是这样的（至少，这是我一直这样做的方式）：
<html> <head> <style> body { text-align: center; /* IE6 */ } #wrapper { margin: 0px auto; width: 800px; background-color: #eee; /* to see it better */ text-align: left; /* IE6 */ } </style> </head> <body> <div id="wrapper"> ... content ... </div> </body> </html>现在，还有另一种方法可以完成同样的事情，但margin: -50%; （或者固定值，在这种情况下， margin: 400px; ），如下所示：
<html> <head> <style> body { margin-left: 50%; } #wrapper { margin-left: -400px; width: 800px; background-color: #eee; /* to see it better */ } </style> </head> <body> <div id="wrapper"> ... content ... </div> </body> </html>我的问题是 - 这两种方法中的一种比其他方法有什么优势？ 还是缺点？ 是否有一个共同的“最佳解决方案”，用于对齐主列？
I'm about to write some templates for a new little Project - and I just wondered about one thing:
If I want my whole page content to be inside a centered column, with - lets say - 800px width, the usual way of doing that would be this (at least, this is the way I always did it):
<html> <head> <style> body { text-align: center; /* IE6 */ } #wrapper { margin: 0px auto; width: 800px; background-color: #eee; /* to see it better */ text-align: left; /* IE6 */ } </style> </head> <body> <div id="wrapper"> ... content ... </div> </body> </html>Now, there is another method to do exactly the same thing, but with margin: -50%; (or a fixed value, in this case margin: 400px;), like this:
<html> <head> <style> body { margin-left: 50%; } #wrapper { margin-left: -400px; width: 800px; background-color: #eee; /* to see it better */ } </style> </head> <body> <div id="wrapper"> ... content ... </div> </body> </html>My question is - does one of this two methods have any advantages over the other? Or disadvantages? Is there a common 'best solution' for centering a main column?
最满意答案
margin:0 auto; 将确保元素两侧有相等的空间量。
margin-left:50%; 是相对于父母的。 例如，如果容器宽度为1000px，则子元素上的左边距为500px。 但是，这不会将元素居中，它会将其放在中间的左侧 - 除非您像在您的示例中那样在子元素上使用固定值进行破解。
通常，当你在处理一个包装，就像你的情况一样， margin:0 auto; 是最简单和最灵活的解决方案。 在其他情况下，您可能会发现使用百分比或固定值更好（例如，浮动时）。
margin:0 auto; will make sure there are equal amounts of space on either side of the element.
margin-left:50%; is relative to the parent. For example, if the container is 1000px wide, you will have a left margin of 500px on the child element. However, that will not center the element, it will place it's left side in the middle — unless you hack it with a fixed value on the child element as in your example.
Usually, when you are dealing with a wrapper as in your case, margin:0 auto; is the simplest and most flexible solution. In other cases, you might find it better to use a percentage or fixed value (for example, when floating stuff).
发布评论