How can I apply vertical-align to take effect ?, Vertical-align takes effect

How can I apply vertical-align to take effect ?, Vertical-align takes effect
Vertical-align used to always want vertical center alignment of some elements, and line-height is often used. However, line-height is not ideal for images (not ideal) view my article: line-height series (2)
So use vertical-align: middle. However, it is always invalid when used. After checking the materials and practices, I finally learned how to use vertical-align!Environment:Set line-height for the parent element.Target objects:The inline-block and inline elements in the child element. 1. When line-height is set for the parent Element

• The parent element (inline-block \ block) must contain line-height (whether or not the inline element is available), and vertical-align in the child element (inline-block/inline element) can take effect.

• Vertical-align cannot be inherited and must be set separately for child elements.

Definition-under the condition that the parent element defines line-height, vertical-align is used to align (inline/inline-block) child elements based on the base point of the parent element.

Value	Description
Length	The distance increases (positive) or decreases (negative) the element. '20140901' is equivalent to 'baseline'
Percentile-%	Increase (positive) or decrease (negative) elements by distance (percent relative to the 1line-height1 value. '0% 'is equivalent to 'baseline'
Baseline	Default value. The baseline of the element is aligned with the baseline of the parent element.
Sub	Reduces the baseline of an element to the appropriate subscript position of the parent element.
Super	Raise the baseline of an element to the appropriate superbidding position of the parent element.
Top	Align the top of the child element with the top of the line box.
Text-top	Align the top of the element with the top of the content area of the parent element.
Middle	The vertical point in the element is aligned with the baseline of the parent element plus the height of the letter x in the 1/2 parent element.
Bottom	Align the bottom of the child element with the bottom of the line box.
Text-bottom	Align the bottom of the element with the bottom of the parent element content area.
Inherit	Use the same specified values of the relevant attributes of the parent element.

Detailed description of values: 1. for a value, see the following example :. the test {vertical-align:-2px;} element is offset two pixels down from the baseline. This is often used to fix the mismatch between the single pixel/check box and the 12 pixel text size. 2. For the percentage value, vertical-align is determined by the line-height value inherited from this label. For example, the following sample code :. test {vertical-align:-10%. the Row Height inherited by the tag of test is 20px. The actual value here is-10% * 20px =-2px. The vertical-align percentage value in IE6/IE7 does not support fractional line-height. For more information about other values, see Zhang xinxu's "my understanding and understanding of CSS vertical-align (1 )"

 

About the stage of action-the vertical-align attribute on an element that belongs to the inline or inline-block (table-cell can also be understood as the inline-block level) level.

• The so-called inline-block horizontal element, that is, it can be mixed with the inline horizontal element, but also can set the High-width attribute elements, examples, buttons, single check box, single-line/multi-line text box and other HTML controls, only these elements by default will work for the vertical-align attribute.
• Setting vertical-align for the inline element is helpful. You only need to reset the line-height value. Otherwise, line-height inherited from the parent element can only be vertically centered.

Example 1: The inline element can be used as the parent element without line-height. The font will hold a height suitable for the child element. Small dots can be alignment.

<Span class = "box"> <span class = "dot"> </span> I am a piece of kawaii text. </Span>. box {background: black; color: white; padding-left: 20px ;}. dot {display: inline-block; width: 4px; height: 4px; background: white; vertical-align: top ;}

Example 2: line-height must be set for the parent element of the div. Otherwise, vertical-align is invalid and the image is not moved in the green box ~

<Div class = "outerbox">  <span> This is the internal text of the outer element </span> </div>. outerbox {width: 300px; line-height: 300px; font-size: 16px ;}. outerbox img {width: 30px; height: 30px; vertical-align: bottom ;}. outerbox span {vertical-align: top ;}

Setting vertical-align: top is invalid because the text inherits the line-height of the parent element, causing the text to be centered. To use vertical-align, you can set line-height to a smaller value to overwrite the parent element. 2. When line-height is not set for the parent element, the inline/inline-block child elements are aligned.

• When line-height is not set for the parent element, it is only useful for the sibling element alignment of the element in the row. child elements cannot be centered and alignment the parent element.
• Vertical-align: the midline of the child element of the middle is aligned with the baseline of the sibling element. If this item is set for all sibling elements, the center is aligned.

For example, the yellow line is the vertical line in the picture.

<Div style = "height: 200px">  <span style =" vertical-align: middle "> hahahahhah </span> </div>

 

If only vertical-align is set for the text, the text midline alignment is set for the image bottom line only for the image vertical-align, and the vertical-align values of the midline align and text baseline alignment are both middle, then the two midline alignment with each other