[CSS elements containing vertical center vertical-align with the line-height attribute Detailed]

Be sure to see the end, flex too amazing! ヾ (o◕∀◕) Techno

The door

Consider first the question: How do the vertical center line of text in a div with a fixed height parent?
We all know that the parent div set the line-height equal to its height on it, like this:

//html
<div><span>我要垂直居中</span></div>
//css
div {
  padding: 10px;
  height: 120px;
  line-height: 120px;
  font-size: 16px;
  background: pink;
}

Results as shown:

Principle is very simple, line-heightafter setting the text line height changes. Look set line-heightafter a specific change in the way :

By ling-height subtracting the text font-size value, i.e. (120 - 16) = 104px , the difference between them is 104 `/ 2
= 52px` are applied above and below the text . Therefore, the final text can be centered vertically throughout the div.

Add that with regard to line-heihgtthe value set as a percentage and is set to different numbers:
if the current element font-size: 30px;we want the row height is three times the size of the font, will be set up line-height: 300%;, or line-height: 3;rather if this element has a child element, font set font-size: 16px;. Then to 300% of the time, the row subelement 90px height, i.e. the first calculation, the succession; setting time 3, the sub-element row 48px height, i.e. before inherited, recalculation.

jsfillder in the example

Only the text when we use the method described above can be achieved vertically centered, so if div contains a picture and text it?

Into a stage

That is the real source of this writing problems:

A div contains two sub-elements: the left side of the picture, the right side of the text. Known picture height well above text, images and text are how to do it centered vertically?

If you are still using a set-top line-heightmethod ::

//html
<div>
  <img src="https://o21.xyz/content/images/2016/11/juwairen.jpg" />
  <span>我要竖直居中</span>
</div>
//css
div {
  padding: 10px;
  height: 160px;
  line-height: 160px;
  font-size: 16px;
  background: pink;
}
img {
  width: 70px;
  height: 70px;
}

The effect is like this:

It can be seen just text centered, and where the image is not what we want. The reason is: a picture img vertical-alignattribute is defined baseline positional relationship in the vertical direction and the base element row elements within the row . The default value baseline, i.e., the parent element on the base element.

[Note: this element always refer to elements of the row height Oh! So if the line is to make inline elements 14px height of the first row of the required elements to the line-height to 50px 50px high in a centered vertically div Oh ● ω ●]

In addition to the default value, vertical-alignthere are several common values, in order to try it:

(Wherein, if the set percentage, a reference line-heightvalue.)

img { vertical-align: top; } //    把元素的顶端与行中最高元素的顶端对齐

img { vertical-align: bottom; } //把元素的顶端与行中最低元素的顶端对齐

img { vertical-align: text-top; } //把元素的顶端与父元素字体的顶端对齐

img { vertical-align: text-bottom; } //把元素的底端与父元素字体的底端对齐

img { vertical-align: middle; } //把此元素放置在父元素的中部

Can be found, the setting value middleis the result we want.

Furthermore, vertical-alignyou can also set percentage value and, when set to a negative value, the picture will be moved downward.

Never expected: a flex two lines of code to achieve a ● 0 ●

Just add the following two patterns to the container, the vertically centered on the success, line-heightall of the redundant.

display: flex;
align-items: center;

The complete code like this:

//html
<div>
  <img src="https://o21.xyz/content/images/2016/11/juwairen.jpg" />
  <span>我要竖直居中</span>
</div>

//css
div {
  display: flex;
  align-items: center;
  padding: 10px;
  height: 160px;
  font-size: 16px;
  background: pink;
}
img {
  width: 70px;
  height: 70px;
}

! So easy
attach Nguyen teacher wrote flex Tutorial:
Flex Layout Tutorial: Grammar
Flex layout tutorial: Examples of articles

References:
HTTP: //www.w3school.com.cn/cs ...
HTTPS: //developer.mozilla.org ...
HTTP: //stackoverflow.com/ques ...
HTTPS: //developer.mozilla .org ...