CSS Notes 2

Horizontal center Setting-inline element Text-align:center

If the element is set as an inline element in text, picture, and so on, the horizontal center is set by the parent element .text-align:center

Horizontal Center Setting-Fixed width block element margin:0 auto;

Elements that satisfy the fixed width and block two conditions can be centered by setting the "left margin" value to "auto".

Horizontal Center Summary-variable width block element method (i) table{margin:0 Auto}

First step: Add a table label (including <tbody>, <tr>, <td>) to the center of the element you want to set.

Step two: Set the "left and right margin center" for this table (this is the same as for a fixed-width block element).

Horizontal Center Summary-Indefinite wide block element Method (ii) Text-align:center;display:inline;

The second method: Change the dispaly of the block-level element to the inline type, and then use the Text-align:center to achieve the center effect

Horizontal Center Summary-variable width block element method (iii)

Method Three: By setting float for the parent element and then setting position:relative and left:50% for the parent element, the child elements are set position:relative and left:-50% to achieve horizontal centering.

Center vertically-single line of text with parent element height determination

The height of the parent element determines the vertical centering of a single line of text by setting the height of the parent element and the line-height to a high consistency.

Center vertically-multi-line text with parent element height determination (method one)

Use the Insert table (including TBODY, TR, TD) labels and set the Vertical-align:middle.

Vertical centering-Multi-line text (method two) Display:table-cell;vertical-align:middle of the parent element height determination;

In Chrome, Firefox and IE8 above the browser can be set block-level element display for Table-cell, activating vertical-align properties, but note IE6, 7 does not support this style.

Implicitly changing the display type

One interesting phenomenon is that when you set one of the following 2 sentences for an element (regardless of what type of element was previously, Display:none):

1. Position:absolute
2. Float:left or Float:right

The element automatically becomes display:inline-block, and of course you can set the width and height of the element and the default width does not fill the parent element

Article reference: http://www.imooc.com/code/6364

CSS Notes 2