Css horizontal center summary, css horizontal center

Css horizontal center summary, css horizontal center

Preface

I have read many posts and found that none of them can directly help beginners quickly use the horizontal center layout. So here I will make a summary, which is a little accumulation of horizontal center layout, it is also convenient for beginners to use it out-of-the-box.

 

I. Element Classification

1. Line Element

An inline element can be displayed in a row. Note: The height, width, and bottom margin of an element cannot be set. The height and width of an element are the height and width of the text or image it contains.

The row elements include the following:

<A>, <span>, <br>, <I>, <em>, <strong>, <label>, <q>, <var>, <cite>, <code>

Of course, sometimes you can use the following code to convert a block element:

Display: block;

 

2. Block Elements

Block elements occupy one row. Other elements can be occupied only from another row. Note: You can set the height, width, and bottom margin of an element. If you do not set the width of an element, it is 100% of its parent container.

Block elements include the following:

<Div>, <p>,

Similarly, you can use the following code to convert a block element into a row element:

Display: inline;

 

3. inline block elements

Inline block elements are similar to intra-row elements and can be displayed on one row. Note: The height, width, Row Height, top and bottom margins of the element can be set, which is highly practical.

Inline block elements include: , <input>

You can use the following code to change other elements into inline block elements:

Display: inline-block; Note: inline-block does not support IE6 or IE7. You need to add * display: inline; * zoom: 1; To trigger layout.

 

Ii. Normal Element Center Method

A. Use the adaptive method of the left and right margins:

Width: 200px;
Margin: 0 auto;/* use this method to change to block elements with fixed width */

 

B. Use the margin plus the positioning method:/* this method is not applicable to intra-row elements and needs to be changed to block or Inline block elements */

Width: 500px;
Height: 30px;
Position: relative;
Margin-left: 50%;
Left:-250px;/* 250px is the width of the element divided by 2 and needs to be located */

 

C. Set the parent element to text-align: center;/* use this method to change to an inline or Inline block element */

 

D. For elements with uncertain width, you can place a table label on the outer layer and use margin: 0 auto to center the table:/* This method applies only to block elements */

Table {
Width: 960px;
Height: 500px;
Border: 1px solid red;
Margin: 0 auto;
}
. Center {
Border: 1px solid blue;
}

HTML code:

<Table> <tbody> <tr> <td> <div class = "center"> I want to center horizontally! </Div> </td> </tr> </tbody> </table>

E. for an element with uncertain width, locate it and its parent element, set left:-50% and left: 50% respectively, and then implement horizontal center:/* This method applies only to block elements */

. Father {
Position: relative;
Left: 50%;
Width: 960px;
Height: 300px;
Background: yellow;
}
. Children {
Height: 30px;
Background: # ccc;
Position: relative;
Left:-50%;
}

HTML code:

<Div class = "father">
<Div class = "children"> aaaaaaaa </div>
</Div>

 

F. to center flexbox with css3, set display: flex and justify-content: center in the parent element. This method applies to all elements, but IE compatibility exists. Use it with caution on PC pages.

Flex usage:

Display: flex;/* block elements by default */

Display: inline-flex;/* change to line element */

Center instance:

. Father {

Display: flex;
Display:-webkit-flex;
Justify-content: center;
-Webkit-justify-content: center;

}

 

3. Center of floating Elements

Floating element: the element after floating operation using float: left | right.

1. When the floating element is uncertain in width, use absolute positioning and add left: 50% and margin-left:-81px.

. Children {
Text-align: center;
Float: left;
Height: 30px;
Position: absolute;
Left: 50%;
Margin-left:-81px;
Background: # ccc;
}

2. When the floating element is fixed in width, use relative positioning and add margin-left: 50% and left:-width/2. /* Width/2, that is, half of the fixed width */

. Children {
Width: 500px;
Height: 300px;
Float: left;
Margin-left: 50%;
Position: relative;
Left:-250px;
Background-color: # CCC;
}

 

Updating content...

Original Articles are difficult to work with. If you need to reprint them, please indicate the source. If there are any errors or better methods, I hope you can correct them in the comment area, so that we can make common progress!