A journey begins
Today to see a topic on how to center a FLOAT:LEFT element of the topic, I quite think with margin:0 auto can be solved. However, after the experiment, found that this is not the case, only to find that their knowledge of this area is quite hectic! So left the business, the book Search data review This part of the ' simple ' content. and summarized as follows.
First, three ways to clear the float.
When the float property is set for an element, we know that the element will be freed from the flow of the document, like a floating leaf in the water. However, in the case of floating, may cause the Web page content to appear some we do not want to let the disturbance, for example its parent element's wrapping function will lose the function, if you set a beautiful background to the parent element it is gone, it is not annoying! Therefore, it is important to clean up the disturbance caused by the floating property. We often have three ways.
Method One: Add a label (such as <br/>) after the floating element, and set the Clear:both for the label ; But its disadvantage is that it adds more useless unnecessary tokens.
Method Two: Set the Float property on its parent element, which will also have the ability of the parent element, and it will not affect the ~ but this practice may result in other non-need floating child elements also affected by its float.
method Three: Set the parent element Overflow:hidden; style, we can also achieve the desired effect. The principle is simple, because the overflow property defines how the element should react when the contained content is too large for the specified size, and when it hidden, the parent element's bounding rectangle clings to the child element. So, we have achieved the desired effect. However, it will produce scrollbars or truncate content in some cases, which we can avoid with great care.
Therefore, we give priority to the third method, or the second, as appropriate, use the ~
Second, how to center a set of float:left elements
For a non-floating element, we can usually set the margin:0 auto to achieve the center of the element, but this method has no effect on the floating element, in fact, we can understand that, after leaving the flow of the document, the power of floating is actually the power of auto, So he will automatically float to the left.
So, this situation, should be how to achieve the center of the effect? Careful consideration, there will be such a method.
First set a width value for this element, set its margin-left:50% first, this time the left edge of the element is exactly in the center of its parent element, and then set its position:relative;left: minus half the width of this element, The goal is to move this element to the left by half its width, which guarantees that the middle point of this element is in the center of the parent element. The instance code is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8" /> <title>Element centering problem</title><styletype= "Text/css">#main{width:70%;Background-color:#666;Overflow:Hidden;}#div1{width:30%;Height:200px;float: Left;Background-color:Blue;Margin-left:50%;position:relative; Left:-15%;}</style></Head><Body><DivID= "Main"> <DivID= "Div1"> <P>Center It! Div!</P> </Div></Div></Body></HTML>
That's it. Keep on ~
Three common ways to clean up floats and how to center a floating element
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
