HTML text picture vertically centered

Method One: Set the box height and line-height the same, this method applies to a line of text.

The picture is centered vertically and a line of text is aligned with the attribute Vertical-align

Small icons and text vertically aligned, small icons inserted as backgrounds

attr: Set your own generated properties, such as selected checked such as the use of the mouse point over his value is undefinded, so its own property recommended prop

Containing blocks (containing block)
The size and position of an element is often determined by the containing block in which the element is located, and the containing block is not specific to an element area, but rather a piece of visual imaginary area, which makes it easy for the element to be positioned.
How do you know where the containing block of an element is?

• Initial include block
  A user agent (such as a browser) chooses the root element as the containing block (known as the initial containing block). When a child element of HTML has no other containing block that is close to it, it relies on the initial containing block for positioning,
  The initial size of the containing block? That is, the viewport size, and the height does not increase as the HTML increases.
• an element that is not absolutely positioned, and whose containing block is composed of the content boundaries of the nearest block-level ancestor element box.
  The same is true for floating elements, starting with the content boundary.
• The containing block of an absolute element is established by the ancestors of the nearest position not static
  In fact, this is more complex, and it is necessary to consider whether the containing block of the absolute element is inline or block-level element created. Inline compatibility is poor, so it is generally avoided to allow inline elements to contain block-level elements, so most of them are also created by block-level elements containing blocks.
  Its containing block is formed by the inner boundary of the ancestors ' border.
• If the element has the attribute ' position:fixed ', the containing block is created by the viewport

Miss____du
Links: http://www.jianshu.com/p/413f471eeb97
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.


If the parent element is z-index valid, the child element, regardless of whether it is set Z-index, is consistent with the parent element, above the parent element;
If the parent element Z-index fails (not positioned or uses the default value), then the Z-index setting of the anchor child element takes effect, and the negative setting is overridden by the parent element

HTML text picture vertically centered