CSS styles--vertical horizontal centering of fonts and elements

The difference between a 1.CSS style and a tag attribute in HTML:

The property of the label is represented by the property name = "Property value".

A CSS style is a property name that takes a name value pair: a property value;

2. Inline elements (inline elements) and block elements

(1) inline elements and their characteristics:

The so-called inline element, which refers to only its own size, does not monopolize a row
Common inline elements:
A img iframe span
Span does not have any semantics, and the span tag is used specifically to select the text and set the style for the text

Inline element setting width height is not valid, you can not set the row height, its width and height are by default the element is open

Internal padding can be set inline, IE6 above browser support

Margins can be set inline, but only for left and right margins

(2) block elements:

The so-called block element is a single line of elements, regardless of how much of his content will be exclusive line
P H1 H2 H3 ... It's all a block element.
The DIV tag has no semantics, is a purely block element, and does not set any style on its elements

You can set the height and margin of a block element

If you do not set the width yourself, its width is the width of its parent element

Block elements can accommodate block elements and inline elements, but cannot contain block elements in inline elements

3. Several centering methods

(1) Set text in block element to center horizontally

Use the Text-align style to set the text or picture centered on the block.

The style can only manipulate block elements or inline elements that are displayed as block elements by CSS

When the style is set on a block element, the text or picture in its child block element is also centered relative to its child block element

(2) The block element itself is centered horizontally

By setting magin:0 Auto, the block element is displayed horizontally in its parent element

(3) Vertical centering of inline elements

By setting the Vertical-algin property

This property applies To:

Inline elements (block elements that are converted to inline elements)

Display set to Table-cell element

In table, which is the element in tables

(4) Set text in block element to center horizontally

　　　　

　　　　

CSS styles--vertical horizontal centering of fonts and elements