Line-height, vertical-align, and image center alignment,

Line-height, vertical-align, and image center alignment,

As for the image center and alignment, although I had been in the front-end industry for some time, I thought I understood it, but I was actually confused and found some blogs, however, I feel a little broken. After reading this article, I am still a bit confused.

After reading the css authoritative guide, you can find out the root cause of the problem.

 

The main problems are as follows:

1. What is line-height, where is the range, and what elements are used?

2. What is the relationship between vertiacal-align and line-height? What is the process of element alignment.

3. What is the difference between image alignment and text alignment?

4. Why is alignment of floating elements faulty?

------- Answers the fragmentation knowledge involved in these questions:

Baseline, bottom, in-line box, line box, line spacing, replacement element and non-replacement element, alignment

The following describes the above three problems and the corresponding fragmentation knowledge points.

Generally, we do not know vertical-align because we do not know the fragmented knowledge behind alignment, which is often ignored by many blogs during parsing.

 

Conclusion:

1. line-height is the Row height, mainly used for text spacing between upper and lower lines. Based on the text, it affects the position of the text element, and has a significant effect on the position of the element in the row, however, it has little impact on block elements.

 

2. The relationship between vertical-align and line-height is: line-height is the alignment basis of vertical-align. Vertical-align mainly affects the alignment of elements in the row, but does not affect the layout of block elements.

There are two factors that determine the element alignment in the row: 1. height of the element itself (similar to replacement elements such as images and buttons) 2. line-height of other span and em non-replacement elements. The row box is aligned with the baseline in the row by calculating the height and line-height.

However, when floating occurs, floating will have a special impact on the layout of the elements in the row, so it will not be aligned in the original way. In this case, setting vertical-align is often ineffective.

 

3. The alignment of an image is to align the bottom of the image, that is, the bottom of the image with the default baseline of the row box. The alignment is based on the bottom. The reason for affecting image alignment is the height, padding, and border size of the image.

Text elements, such as <span> text content </span>, align the baseline of the line and line frames with the baseline of the line frames. The alignment is based on the baseline. The line-height and the font attributes of the element affect the text elements in the row.

 

4. the elements are actually removed from the normal Document Stream after floating (so the height will collapse and the parent container will contract ), but it also has an impact on the document (the most classic is the surround effect ). Element floating is similar to a removed black user. Although it is not in the land register, it actually occupies a place, so other elements cannot occupy the space of floating elements, but because it is a black user, so other elements will surround it as if it does not exist.

After the elements float, they will try to move to the left and right sides of the container and "float" to the highest position of the container as much as possible.

 

Therefore, when an element in the row floats, the floating rule will overwrite the vertical-align rule. In this case, setting vertical-align will often cause problems, the most typical is to float the image in a paragraph and set vertical-align, but it often does not work.

 

However, text elements are not affected when they are floating, because line-height actually applies to text elements. Although the container location of text elements is "drifting" to other locations, however, the text in line-height still has the Row height, which can affect the layout of the element in the row.

Certificate -------------------------------------------------------------------------------------------------------------------------------------------------

------------------------------------------------ I am a split line worker ---------------------------------------------------------------------------------------

Certificate -------------------------------------------------------------------------------------------------------------------------------------------------

Conclusion how to deduce

After reading these conclusions, many people may not understand why, because different people have different background knowledge. The key to these conclusions is precisely these key fragmented knowledge, they act as pin wires. Let's take a look at how we come to the conclusion.

 

 Certificate -------------------------------------------------------------------------------------------------------------------------------------------------

------------------------------------------------ I am a split line worker --------------------------------------------------------------------------------------- 

Certificate ---------------------------------------------------------------------------------------------------------------------------------------------------

 

1. Core Issues: Alignment

Alignment involves two objects. To Alignment Elements and alignment objects, an object cannot be alignment. For example, if you are in a team and align from high to low, each person must have a reference system that is aligned with the reference system.

The alignment of the element in the row exists in addition to the element in the row. This reference is the baseline of the row box, and the baseline of the row box is based on the baseline position of the element in the row box.

 

1.1 Question about alignment Extension: What is a baseline?

EveryText ElementThere will be four lines, the top line, the middle line, the baseline, and the bottom line. The baseline generally refers to the baseline of the text element, which is based on the letter x and the bottom edge of the letter x.

The line height is the distance between two text line baselines, which usually produces spacing between paragraphs.

But it can also be understood that the line height = the font size + the upper half line spacing + the lower half line spacing (where the upper half line spacing is equal, this equation can be derived)

 

Each text element and text element have a baseline. The baseline position is affected by the text font format and line-height.

 

 

1.2 Question about alignment and Extension: What is a row box and a row box?

 

In each paragraph line, in addition to the content box of the Package content, different line elements also automatically generate a line box. The text without label package will generate an anonymous line box, different line boxes generate line spacing based on their different line-height, while the line boxes exactly include the highest top and lowest bottom, so as to generate a line box.

 

 

The baseline in the line box is well calculated, but how is the baseline in the line box calculated?

The baseline of a line box is the element with the lowest baseline in the line box, that is, the baseline with the largest line-height.Text Element.

 

In the following example, we can test that when the line-height of a text element in one row exceeds the line-height of other line elements, the entire container will automatically expand, the location will also move down.

<! DOCTYPE html> 
　　
 
 
1.3 Question about alignment Extension: What is a replacement element.
Replacing elements means that the content of an element itself is not directly represented by a document. In other words, in different pages, the browser cannot determine the elements, aspect, and button of the specific content, because the content of the image depends on the src attribute source referenced by the image, and the type of the button is based on its input type, the browser cannot determine that the img element is a beautiful image today, then, is the img in the page loaded tomorrow a beautiful image.
 
Except for the replacement element, other elements are non-replacement elements. The influence of non-replacement elements and replacement elements in the row box is mainly calculated based on the height. The position of the replacement element in the row box is determined by its height, padding, and border, the line-height and Font Style of the element in the row box are not replaced.
 
 
1.4 Question of alignment Extension: what is the impact of replacement elements such as images in the row box.
If there are only text elements, the line box will calculate the baseline position well. However, if there are image buttons and other replacement elements, the calculation method will be slightly more complex.
In css, there are two methods of height: height and line-height, which determine the height and position of elements, for intra-row replacement elements such as images, height is the basis for Row-frame calculation, and line-height does not affect images and buttons.
Therefore, if an image is in the row, the bottom of the image is aligned with the baseline of the text.
 
So what happens when the image height is higher than the overall height of other rows and frames?
 
The image is aligned with the text baseline of the original row-frame to open the height so that the highest point of the row-Frame includes the top of the image.
Therefore, when the line-height in the p section is 40px, the height of the line-frame is 50px-40px = 10px higher than that before the image is added, therefore, the baseline is moved down to a 10px height.
<P style = "line-height: 40px; "> <span> text content 1 </span> <em> text content 2 </em>  </p>
 
 
1.5 Question about alignment and Extension: What effect does floating have on the elements in the row.
After an element is set to float, the element will be removed from the normal document stream, but it will also have some impact on the original document abortion.
 
You can imagine that on the water surface of the rectangular area, many people want a fixed water bed (Browser box model layout), But the fixed water bed needs to be registered (Tell the browser how to layout computing). Suddenly one day, someone wanted to create a water bed on the far left of the rectangle area (Set the element to float left), It quietly moves from the bottom of the water to the leftmost, squeeze the original water bed (The floating element moves to the highest position and the leftmost or rightmost position of the container as much as possible.), A waterbed is built on the far left, with no registration (Parent container height is not notified, resulting in height collapse). Others do not know that when they go to the far left side of the fixed water bed, they find that someone has been fixed, so they can only be fixed next to it (Floating will produce the surround effect, and this is because the floating elements are removed from the normal document stream.).
 
An image is a replacement element. It is calculated in the row Box Based on the Image Height. If the image is floating, the image does not exist in the row box. Therefore, the line box calculates and alignment based on the original text line baseline.
 
Therefore, the effect is as follows:
<P style = "line-height: 40px; "> <span> text content 1 </span> <em> text content 2 </em>  </p>
　　
The image is not floating:
 
Float on the left of the image:
 
 
No image:
 
 
2. Alignment Process
 
The line element is the default vertical-align set to baseline, that is, baseline alignment. When a text line starts rendering,
1. First, the browser will find out the type of each element, whether to replace or not to replace the element.
2. Then, based on their height, line-height, and font size, the box in each element line is generated.
3. determine the baseline position in the line and line boxes.
4. align each element based on whether vertical-align is set.
 
3. About center alignment
Vertical-align: the middle is used to align the midpoint of the line box of the element with a vertex at Ex above the baseline of the parent element. The 1ex is relative to the font-size of the element to calculate the height of the x letter, 1ex is equal to the letter height of x in the font.
Most browsers process 1ex as 0.5em, that is, 0.5 times the font-size.

 
 
Reference:
Css authoritative guide
Zhang xinxu's article: "deep understanding and application of css line height line-height"
 
Original article. For more information, enter the address !!!