114. With regard to the front of the vertical-align Detailed

Note that this property has not been previously, now found more and more the importance of its properties.

For master a technique, you will choose practical grasp every detail? Or just want a vague smattering? The last use of the time by constantly coming trial and error to achieve the purpose?

Technology is not the gun that allows you to realize the way through trial and error, you will not slow because of the time 1s and die; however, improve efficiency and accuracy, it is very necessary.

Zero, first excerpts of some of the inherent characteristics of vertail-align

vertical-align what to do?
First, we need to understand is used vertical-align vertically aligned. The next discussion makes sense.

  • 1, the elements of the vertical-align vertically aligned with the longitudinal position of the elements does not matter

    Which means that it is not the will of the previous elements for the transfer; it is a truth, from birth right there.

  • 2, vertical-align elements with row height line-height has nothing to do.

    This requires that the constant practice

  • 3, vertical-align vertically aligned position is only associated with the size of the font-size.


A first look at some vertical-align due to start a discussion Guaixiang


As shown above, are inline-block elements, and why there is a problem of uneven height? Obviously some elements within just write a word of it ah?

Analytic trilogy:

  • 1, the default value of vertical-align baseline - it brings effects within a row, the elements in all the rows (inline), the block elements (inline-block) within a row, according to the baseline alignment.
  • 2, the base block row elements in the blank is top element; other elements at the bottom of the baseline of the text.
  • 3, the default value of vertical-align baseline. That is the baseline alignment we have done align the baseline (but the problem is that not everyone had the same baseline). So causing this phenomenon.

In fact, the essence of the matter is everyone's baseline is not the same. All of you, though by whether you are male or women, will be divided into two groups (maybe there will be three ??), but you always used to describe human beings no problem.

Solution:
Well, we'll put it another alignment. We setvertical-align: top;

The top of the highest element in the top row of elements is aligned.

So we have to redefine the elements of vertical-align for the top. top of it, and the top line is the top element of the highest element is aligned.

From the above example, we can know the vertical-align default attribute is Baseline (baseline alignment).


Second, let's look at it, which has several properties

It may look something w3c official website.

Here we have to make some examples to.


Reference article

Guess you like

Origin www.cnblogs.com/can-i-do/p/12634131.html