Vertical centering method for inline elements _ knowledge points

Method 1: Set the height,line-height of the block element to the same value:

Acts on a single line of text, so that text is centered vertically;

Implementation principle: The difference between the calculated values of Line-height and font-size (becoming "line spacing" in CSS) is divided into two halves, added to the top and bottom of a text line. (The smallest box that can contain the content is the row box.) ) to achieve a single line of text center;

Method 2:vertical-align

Apply to the presence of more than one inline element in a block element needs to be centered vertically (such as when the picture and text need to be centered vertically), you can achieve the effect by setting the vertical-align of the label of the picture or the label (inline element) of the text;

Definition of the Vertical-align property: This property defines the vertical alignment of the baseline of an element in the row with respect to the baseline of the row in which the element is located. Allows you to specify a negative length value and a percentage value. This causes the elements to be reduced rather than elevated. In a table cell, this property sets the alignment of the contents of the cell in the Cell box.
Such as:

          <span></span>

          

 </div>

span {Vertical-align:middle} indicates that the baseline of the picture is aligned relative to the middle of the vertical direction of the span text;

Method 3: Setting the Display:table-cell;vertical-align:middle, reaching the vertical center;

Applies to the presence of inline elements within a block element, the blending elements of a block element, and the need to center them vertically;

Note: There is a compatibility problem with this method; IE7 and IE6 do not recognize Display:table-cell (but support css1 properties such as Display:block.) ）
IE8 and later versions can be identified, and using the Display:inline-block attribute instead of Display:table-cell is perfectly OK.

Method 4: Absolute positioning + negative outer margin;

To center an element vertically, you can first absolutely position it, set the top:50%,margin-top:-2/height (assuming the element is at the top;)