Our center is to use css layout often encountered. When using css to center, sometimes able to get a property, sometimes requires a certain skill to be compatible to all browsers, some commonly used methods paper centered a brief introduction.
Note: This article talked about methods other otherwise stated, it is compatible with IE6 +, Google, Firefox and other mainstream browsers.
First is a few simple, harmless to humans and animals is centered method:
1. The margin is set to auto
Specifically, the center is to be an element of margin-left and margin-right are set to auto, this method can only be centered horizontally, and floating elements absolutely positioned elements or invalid.
2, using the text-align: center
This is nothing to say, only inline elements for pictures, buttons, text, etc. (display as inline or inline-block, etc.) were centered horizontally. But to be noted that in these two wonderful IE6,7 browsers, it is able to level for any element centered.
3, using the line-height of a single line perpendicular to the center so that the text
The text line-height to the height of the text of the parent container, only applies to the case of a line of text.
4, use the form
If you are using a form, then no need to worry about a variety of issues centered, as long as the use td (also might use th) align elements = "center" and valign = "middle" These two properties on We can handle it perfectly inside the content of the questions centered vertically and horizontally, and the table will default to its contents inside will be centered vertically. If you want to control the content of the table in css centered, centered vertically using vertical-align: middle, as for the middle level, looks like css is no corresponding attribute, but in IE6,7 we can use text-align: center to the table where the elements horizontally centered, IE8 + and Google, Firefox and other browsers text-align: center only inline elements act on the block element is not valid.
Ie6,7 may be aligned in the table of contents is controlled by the text-algin css horizontal direction, regardless of the content element within the line are valid or block element.
But ie8 + and chrome, firefox and other browser text-align: center of the block element is not valid, can only use their own forms align attribute.
5, using the display: table-cell to center
For those who are not elements of the table, we can display: to simulate it into a table cell table-cell, so that you can use the form that suits the characteristics of the center. E.g:
However, this method can only be used on IE8 +, Google, Firefox and other browsers, IE6, IE7 are invalid.
The above mentioned methods are very basic, natural can not be called odd wicked craft meter, here is some of the need to use some of the techniques of centering method.
6, use absolute positioning to center
This law applies only to those we already know that their width or height of the element.
Absolute positioning carried out by the middle of this principle is absolutely positioned elements of the left or top of the property to 50% of the time element is not centered, but to the right or left side a width or height of the element than the position of the center half the distance, it is necessary to use a negative value of the margin-left margin-top or to pull it back to the centered position, the margin value is a negative element taken half the width or height.
running result:
If you want to implement centrally in one direction, it is possible to use only the left, margin-left horizontal centering is achieved using top, margin-top vertical centering is achieved.
7, another use absolute positioning to center method
This same law applies only to those elements that we know their width or height, and unfortunately it only supports IE9 +, Google, Firefox and other modern browsers in line with w3c standards.
The following piece of code used to understand this method:
running result:
Here if you do not define the elements of width and height, then he's width will be determined by the left, the right values, the high will be determined by the value of the bottom of the top, it is necessary to set the width and height of the element. And if changing the left, right, top, bottom of the can so that the value of the element is displaced in one direction, you can go try.
8, with the use of a floating center located opposite to the horizontal
This method is also about how the float solution centered level, and we do not need to know the width center of the element.
Floating centered principle is: the relative positioning of the float to 50% of the width of the parent element place, but this time element is not centered, but more centrally located than the half of the width of their own, then you need Him then a child elements located opposite, and that the extra pull back half of their width, and because it is located opposite with respect to position itself, so long as the half width of their left or right can be set to 50% got it, so do not know how much their actual width.
This fitting method using a floating center located opposite to the advantage is not known to the width center of the element, even if the width of the line is also constantly changing; a disadvantage is the need to wrap extra elements to the center element.
Look at the code:
running result:
9, using the font-size vertical centering is achieved
If the parent element height are known, which make it a sub-element vertically centered horizontally, this method can be used, and a width or height of the child elements are not necessarily known.
This method is only valid for IE6 and IE7.
This method consists of the parent element is set to a suitable value of the font-size, this value for the value of the height divided by the value of 1.14 obtained parent element and a child element must be inline or inline-block elements, need plus vertical-align: middle property.
As for why is 1.14 rather than the other divided by the number, no one really knows, you just need to remember this number 1.14 on the line.
In Method 5 said in IE8 +, Firefox, Google and other browsers can now use display: table-cell to the middle, and font-size method here is suitable for IE6 and IE7, so the combination of these two methods compatible with all the browsers will be able to:
In the above example because you want to center element is a block element, so we need to take him into inline elements, if you want to center elements are inline elements such as images, you can omit this step.
Further, if the vertical-align: middle parent element is written in the sub-element instead, this is also possible, using this value of 1.14 when calculated only for a font-size value becomes about 1.5.