One, the block element horizontal Vertical Center (special acknowledgement: Xin life. Xin brother produced must be a boutique! Brother worship)
For the horizontal vertical center of a block element, the way to center horizontally does not have to say much, generally with margin:auto; And for the vertical center, although there are vertical-align:middle properties, but because it only applies to the table label, and the table label effect is not good control of the characteristics of everyone understand ... Therefore, we typically use the following method: Set the child element to the Inline-block property and its row height property: The value of Line-height is set to the same height as the parent element. Here, I want to promote a method, from "Xin Life"
http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0% b4%e5%b9%b3%e5%9e%82%e7%9b%b4%e5%b1%85%e4%b8%ad/
The code is as follows:
HTML aspect:
<body> <p class= "Big" > <p class= "small" ></p> </p> </body>
CSS aspects:
. big{ width:500px; height:500px; border:1px solid red; position:relative; } . small{ width:200px;/* own element wide height can be arbitrarily set */height:200px; position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px; Margin:auto; }In the code above, the height of the child element is arbitrarily set. This element can be implemented horizontally and vertically centered in the parent element. In the parent element, we used the position relative property. In the child element, we set its position property to absolute and set the value in four directions to 0px. And let his margin value be adaptive. As we can see from the review element, the margin area of the child element is filled with the entire parent element when this is set, and the left and right margin values are equal, and so are the margin values. However, this does not conform to, when the code values conflict, the priority to resolve the top value and left value of the law. Because of what the principle is, small GE is also unknown. If there is a great God know, also hope to enlighten. But this is a good way, I hope everyone ingenious.
Second, after pseudo-class clear floating
Usually we need to clear the float after the block element has been floated, so as not to clutter the layout. There are two main ways to clear the float: 1), write "Clear:both;" in the back of the child element CSS. 2) write "Overflow:hidden" in the parent element of the floating element. Now, we can use the after pseudo class to write a floating property in a third way, so that if there is a need for a clear float, we can add such a floating property to the parent element.
The code is as follows:
. clearfix:after{ content: ""; display:table; /* Use table to not allow floating properties to clear the float. can also be replaced by "Overflow:hidden;" */Clear:both; }The benefit of this approach is that it can be written to reset, which can then be called multiple times.
This article for some CSS style clever method to summarize (recommended) is a small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support topic.alibabacloud.com.
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
