About center layout and ie double margin bug_css/html

Today Google a bit of CSS center layout problem, the results are almost all quoted the same article. In IE, to center, as long as theThe Text-align:center attribute is defined in the element. In Firefox, you need to define a wrapper wrapper. Then specify the Margin-left:auto;margin-right:auto property to center the chunk in Firefox. In fact, I am using Margin:auto, the abbreviation margin property to set the center. The margin abbreviation attribute is the top, right, bottom, and left clockwise order to set the four-azimuth page margin. It is important to note that you are wrong if you think that you are setting Margin-top:auto, and you want to center the chunk after the attribute. In this way, the Margin-left:auto;margin-right:auto must be set at the same time; However, you set margin:0 auto; This method can also be centered.
Another way of centering is to use the combination of left:50%+margin-left:-375px, which is centered on the premise of absolute positioning. The two centering methods are as follows.
Copy CodeThe code is as follows:
/* Method One */
Body {
Background: #00FF7F;
Text-align:center; /* Hack for IE center alignlayout */
}
#wrapper {
Background:aqua;
width:750px;
Margin:auto; /* or margin-left:auto;margin-right:auto;*/
}
/* Method Two */
#wrapper2 {
Position:absolute;
width:750px;
left:50%;
margin-left:-375px;
Background:orange;
}


I personally have been using the method one way to center, because the sense method two blocks lack the necessary rigidity, the code is not very good understanding. If you narrow down the form of method two to a certain limit, you will see that the entire layout will appear to flow. Of course, that's the effect someone wants. :), another benefit of method Two is that the text-align:center of the BODY element is not covered in other nested chunks, because most of the text will still be left-aligned. This can reduce a bit of redundancy to a certain extent. But I think the benefits are negligible. In short, everyone according to their preferences picking is.

The other one is ie double margin of the bug, the solution is to add display:inline; In fact, this parsing error bug will affect many aspects. If you encounter CSS layout in IE, the spacing between the abnormal, you can try to add display:inline; And in certain specific layout problems, need to combine the use of display:block; and display:inline; to make the layout as you wish. I have encountered a similar problem in a unorder list-controlled picture menu.

As soon as possible a variety of different browsers have CSS bugs, but the CSS page layout developed to today, is already more mature, because the bug and let you crazy, the chance of happening is not big. If there is a problem, check the search engine to solve most of your problems. If, in peacetime, you can do some experiments, perhaps more in emergency situations can also be poised.

