CSS style-Vertical Horizontal center of font and element, css peak

CSS style-Vertical Horizontal center of font and element, css peak

1. Differences between CSS styles and tag attributes in HTML:

Tag attributes are represented by attribute name = "property value ".

CSS styles are represented by name-value pairs, attribute names: attribute values;

2. inline elements (intra-row elements) and block elements

(1) inline elements and their features:

The so-called intra-Row Element refers to the element that occupies only its own size and does not exclusively occupy a row.
Common inline elements:
A img iframe span
Span has no semantics. The span label is used to select a text and set a style for the text.

Setting the width and height of an inline element is invalid. You cannot set the row height. The width and height of the inline element are supported by the element by default.

You can set the padding for inline elements, which is supported by IE6 and later browsers.

You can set the outer margin for inline elements, but it only applies to the left and right outer margins.

(2) block elements:

The so-called block element excludes one row of elements, and excludes one row regardless of its content.
P h1 h2 h3... all block elements
Div labels do not have any semantics. They are pure block elements and do not set any styles for the elements in them.

You can set the height and margin for block elements.

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

Block elements can contain block elements and inline elements, but inline elements cannot contain block elements.

3. Several centering Methods

(1) set the text horizontal center in the block element

Use the text-align style to set the text or image center in the block.

This style can only operate block elements or Inline elements displayed as block elements by CSS.

After this style is set for a block element, the text or image in its child block element is also centered relative to its child block element.

(2) horizontal center of block elements

By setting magin: 0 auto; the block element is horizontally centered in its parent Element

(3) vertical center of inline Elements

By setting the vertical-algin Style

This attribute applies:

Inline element (Block Element converted to inline element)

Elements whose display is set to table-cell

In table, that is, the elements in the table.

(4) set vertical center of text in block elements

By setting the padding of block elements

(5) vertical center of block elements

You can set the margin.