CSS layout skills-center various css la s

CSS layout skills-center various css la s

Center is a common situation when css is used for layout. When css is used for residence, sometimes a single attribute can be done, and sometimes some skills are required to be compatible with all browsers. This article will briefly introduce some common methods in the center.

Note: The methods described in this article are compatible with mainstream browsers such as IE6 +, Google, and Firefox.

First, let's look at several simple, harmless ways to center humans and animals.

1. Set margin to auto

Specifically, the margin-left and margin-right values of the elements to be centered are set to auto. This method can only perform horizontal center and is invalid for floating or absolute positioning elements.

2. Use text-align: center

There is nothing to say about it. You can only horizontally center the image, button, text, and other in-line elements (display is inline or inline-block. But it should be noted that in IE6 and 7, these two wonderful browsers, it can horizontally center any element.

3. Use line-height to vertically center a single line of text

Set the line-height of the text to the height of the text parent container, which is applicable when only one line of text is available.

4. Use the table

If you are using a table, you don't have to worry about various center problems at all. You only need to use td (or th) the align = "center" and valign = "middle" attributes of the element can perfectly solve the horizontal and vertical center problems of the content in it, by default, the content in the table is vertically centered. To control the center of table content in css, use vertical-align: middle for vertical center. As for horizontal center, it seems that css has no corresponding attribute, however, in IE6 and 7, we can use text-align: center to horizontally center the elements in the table. IE8 + and text-align of browsers such as Google and Firefox: the center function only applies to row elements and does not apply to block elements.

In ie6 and 7, the css text-algin can be used to control horizontal alignment of table content, which is effective for both in-row and block elements.

However, in ie8 +, chrome, firefox, and other browsers, text-align: The center is invalid for block elements and can only use the align attribute of the table.

5. Use display: table-cell to center

For those elements that are not tables, we can simulate them into a table cell through display: table-cell, so that we can use the table's convenient center feature. For example:

However, this method can only be used in IE8 +, Google, Firefox, and other browsers. IE6 and IE7 are ineffective.

 

All that is said to be a very basic method. Naturally, it cannot be called an odd trick. Here are some center methods that require some skills.

6. Center with absolute positioning

This method applies only to elements that we already know their width or height.

The principle of absolute positioning to center is to set the left or top attribute of the absolute positioning element to 50%. At this time, the element is not centered, instead, it is half the width or height of the element to the right or left of the center position, therefore, we need to use a negative value of margin-left or margin-top to pull it back to the center position. The negative value of margin is half the width or height of the element.

Running effect:

If you only want to center in one direction, you can use left and margin-left to center horizontally. Use top and margin-top to center vertically.

 

7. Another method in which absolute positioning is used

This method also applies only to elements that we already know their width or height, and unfortunately it only supports modern browsers that comply with w3c standards, such as IE9 +, Google, Firefox, etc.

Here is a piece of code to understand this method:

Running effect:

If the width and height of an element are not defined here, the width of the element is determined by the value of left and right, and the height is determined by the value of top and bottom, therefore, you must set the height and width of the element. At the same time, if you change the value of left, right, top, and bottom, you can try it by yourself.

 

8. horizontal center using floating and relative positioning

This method is also about how floating elements are horizontally centered, and we do not need to know the width of the elements to be centered.

The principle of floating center is to position the floating element relative to the parent element with a width of 50%. However, at this time, the element is not centered, but half of its width is exceeded than the center position, in this case, we need to use the sub-element in the sub-element to locate the sub-element and pull back the half width of the extra sub-element, because the relative positioning is relative to itself, therefore, you only need to set left or right to 50% in the half width, so you do not need to know the actual width.

This method uses float in combination with relative positioning to stay in the room. The advantage is that you do not need to know the width of the element to be centered, even if the width is changing; the disadvantage is that a redundant element is needed to enclose the element to be centered.

Check the Code:

 

Running effect:

 

9. Use font-size to implement vertical center

If the height of a parent element is known, you can use this method to center the child element horizontally and vertically. You do not need to know the width or height of the child element.

This method is only valid for IE6 and IE7.

The main point of this method is to set a proper font-size value for the parent element. The value of this method is the height of the parent element divided by the value obtained by 1.14, the child element must be an inline or inline-block element, and the vertical-align: middle attribute must be added.

No one knows why it is divided by 1.14 instead of other numbers. You just need to remember the number 1.14.

As mentioned in Method 5, display: table-cell can be used in browsers such as IE8 + and Firefox Google, while the font-size method here applies to IE6 and IE7, therefore, the combination of the two methods can be compatible with all browsers:

In the above example, because the element to be centered is a block element, we also need to change it into an in-Row Element. If the element to be centered is an in-row element such as an image, you can skip this step.

In addition, if vertical-align: middle is written in the parent element rather than the child element, it is also possible, except that the value of 1.14 used in the calculation of font-size is about 1.5.

 

These are some common center methods. If you have any omissions or errors, please correct them!

Students at the front-end are welcome to join the front-end learning exchange group.

QQ Group for front-end learning and communication: 461593224