CSS line-height Line height up/down Center vertical Center style properties

CSS line-height Line height up/down Center vertical Center style properties

DIV CSS line-height Line high up/down Center Properties Tutorial
You often use Line-height to set content (picture, text) rows up and down to center the style effect.
Row Height Line-height catalogue (Music relaxation chair)
Line-height Line High syntax
High-line applications
Line-height case
Line-height Summary
First, Line-height line high grammar-TOP

line-height:22px
DIV{LINE-HEIGHT:22PX}

Linet-height style attribute parsing diagram (Music relaxation chair)
line-height:+ numbers + units (in CSS layouts we generally use pixels px)
The value of the row height line-height can be a percent number | A length value consisting of a floating-point number and a unit identifier that is allowed to be negative. The percentage value is based on the height size of the font.
Introduction of high-line application-TOP

Line-height line High property, apply to the text layout, to achieve the spacing between the upper and lower text, and single-row text in a certain height of the vertical and horizontal layout of the center.
1, for the article class text up and down the line interval
In general, we set the Line-height line Height property on the object settings to allow the text to be formatted evenly spaced how many settings.
2. Vertically centered on single-row text
If we have a fixed 30px height div object, we can use line-height:30px if we want the text content to be vertically centered.
Three, Line-height case-TOP

We set up two Div object boxes, one is multi-row text line height setting, the other is a height fixed a row of text, to achieve the text in this height fixed inside and below the vertical center. Two cases we are using CSS line-height implementation.
1. CSS code snippet (Music relaxation chair)
. divcss5{line-height:20px}/* Line height 20px */
. divcss52{line-height:30px; height:30px;} /* Height fixed up/down center */
2. HTML code Snippet
<div class= "DIVCSS5" >
I'm the first platoon of <br/>.
I'm the second platoon, <br/>.
I'm in the third row.
</div>
<div class= "divcss52" > I height 30px, achieve top-down center </div>
3. Line-height Case effect (music relaxation chair)

Line-height High-use case
Everyone down can copy the CSS and HTML code according to the case diagram personally practice as Div+css Line-height line High property.
Through the above cases, we can modify the value of the row height line-height and then test the observation effect to know the line-height effect.
Iv. Summary of Line-height-TOP

Line-height line high up and down center property style, so that used in multiple rows of text, such as the content of the article to achieve the middle of the text between the center property, and a single row height fixed vertically centered. Often meet the content and picture mix, we want the picture and text content centered in a row, but the text will reside in the lower part of the picture, usually the solution is to use two boxes to set the row height and height respectively.
In a row of text or content layout, if you want to center the content vertically, we only need to set the height of line-height and height of the same length and HTML units can be vertically centered; if it is multi-column or article content usually we will set each line of text must be evenly spaced, At this point we only need to set the Line-height line height. (Music relaxation Chair)

CSS line-height Line height up/down Center vertical Center style properties