First, why write this article
See a question today:
Two P are set Display:inline-block, normal display, but in the second p to add a block level element or inline element, the display has changed a kind, why?
<meta charset= "Utf-8"/><style>p{ width:100px; height:100px; border:1px solid red; Display:inline-block;}. align{/* vertical-align:top;*/}</style><body> <p> </p> <p class= " Align "> Why? </p></body>The solution is to add a second p: vertical-align:top.
About vertical-align and baselines I know a little, but I can't answer the question, so I'm going to summarize and share it.
Second, vertical-align what?
There is a section of information about this:
' Vertical-align ' Value: Baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | Inheritinitial: baselineapplies to: inline-level and ' Table-cell ' elementsinherited: nopercentages: refer to the ' line-height ' of the element Itselfmedia: visualcomputed value: For <percentage> and < Length> the absolute length, otherwise as specified
You can see that vertical-align affects the layout in the vertical direction of inline-level elements and Table-cell elements. According to the MDN description, vertical-align to:: First-letter and:: First-line also apply.
Suitable for:
Inline horizontal elements
Inline:,<span>,<strong>,<em>, unknown element
Inline-block:<input> (ie8+), <button><ie8+>
' Table-cell ' element
Table-cell:<td>
So by default, pictures, buttons, text, and cells are all available with the Vertical-align property.
Value:
The code is as follows:
Vertical-align:baseline|length|percentage|sub|super|top|middle|bottom|text-top|text-bottom|initial|inherit;
Third, Baseline
1. The letter ' X ' and baseline
The lower edge (line) of the letter x is the baseline. It's not the letter S or the letter with the tail underneath.
The baseline even derives from:
1. "Alphabetic" Baseline: "Alphabet" Baseline – English
2. "Hanging" Baseline: "Hanging" baseline – Indic
3. "Ideographic" Baseline: "ideographic" Baseline – Chinese
2, the determination of baseline rules
1. The baseline of the inline-table element is the baseline of the first row of its table.
2. The baseline of the parent element "line box" is the last baseline of the inline box.
3. Baseline determination rules for inline-block elements
Rule 1:inline-block Element, if there is a line box inside, then the baseline of the Inline-block element is the last baseline of the element [inline box] as the content exists, And the baseline of this element must be determined according to its own.
The rule 2:inline-block element, if there is no Line box inside it or its overflow property is not visible, then baseline will be the bottom margin boundary of this inline-block element.
3. Example: inline-block example
Describe:
From left to right are line-block elements, the red line represents the Margin-box boundary, the Blue line represents baseline, yellow is border, green is padding, and blue is content.
The left element contains content that is not out of normal flow C, the middle element is not out of the normal flow of content C also added Overflow:hidden, the right element has no content, but the content area has a wide height.
Baseline of inline-block elements in various situations in the analysis diagram:
On the left, the Inline-block element has content in the normal flow, according to Rule 1, so Inline-block's baseline is the last of the elements that exist as content baseline, that is, the baseline of content C, and C's baseline according to its own, is the picture of blue.
In the figure, the Inline-block element Overflow:hidden is not visible, according to Rule 2, the Inline-block element baseline is the inline-block of the margin-box element of the lower bounds, that is, the Blue line in the diagram.
On the right, the Inline-block element has no content, according to Rule 2, so its baseline is the lower boundary of the margin-box, that is, the Blue line.
4. Example: Baseline determine rule example
Example:
<style type= "Text/css" > . ctn-block{ Display:block; Background-color: #bbb; line-height:200px; font-size:50px; } . Ctn-block. child1{ Display:inline-block; width:100px; height:100px; margin:10px 0; Vertical-align:baseline; Background-color:aliceblue; } </style><p class= "Ctn-block" > <p class= "child1" ></p> <span>gg</span ></p>Analysis:
The parent element. Ctn-block's Base-line is GG's baseline,
Inline-block element because there is no internal line box, and there is no overflow:visible set, so its baseline is the bottom margin boundary.
Four, vertical-align based on the different values of baseline
1, Baseline
Aligns the baseline of the child element box with the baseline of the parent box.
2, Middle
Aligns the vertical midpoint of the element box with the parent box's baseline plus half the x-height of the parent box
Here the vertical midpoint of the element box is easy to determine, the parent box baseline OK, but x-height to be calculated, the x-height is the height of the letter x.
3, Text-top
Aligns the top of the box (Margin-top boundary) to the top of the text area of the parent box
Examine the box to see the top of the margin-top.
Review the text and see that the upper border of the blue area is the top of the text area.
The end result is that the top of the box aligns with the top of the parent box text area.
4, Text-bottom
Aligns the bottom of the box (Margin-bottom boundary) to the bottom of the text area of the parent box
Similar to Text-top, but aligns the margin-bottom of the child element with the bottom boundary of the text area.
5, Sub
Reduces the baseline of the child element box to the appropriate subscript position of the parent box
The baseline of the child element has been determined, that is, margin-bottom the lower boundary, but the parent box's subscript position is too difficult to understand ... First of all, we need to understand the concept of subscript, we can use <sub> tags to add subscript to the text, the content of <span> changes to Gg<sub>gg</sub>, and will have the following effect.
This is the alignment of the Margin-bottom bottom and subscript baseline of the element.
6. Super
Raise the baseline of the element box to the appropriate parent box's superscript position.
Corresponding to sub, super is promoted to the baseline of superscript content, first creating superscript by <sup> tag.
7, percentage
Percentage: Raise (positive) or decrease (negative) child element box, the specific raise/decrease value is calculated by multiplying the value of the parent box's line-height by the percentage. If the percentage is 0%, it is the same as vertical-align:baseline.
This is quite well understood, which is equivalent to the baseline of the child element box rising or decreasing, the specific value is the percentage multiplied by the parent box's line-height.
In this case, the parent box has a line-height of 200px, so setting 25%, the element should move up to 50px.
It's not very intuitive, add a transform:translate (0, 50px), and move it to the familiar position, relative to the next 50px.
8. Length
Raise (positive) or lower (negative) child element box. The value is the rising/decreasing distance, if 0, as with Vertical-align:baseline.
With our most commonly used PX as the unit, set the vertical-align:50px, the effect and the percentage above is 25% (200px*25%=50px), do not do an example.
V. Vertical-align based on the different values of line box
When the vertical-align is set to top and bottom, it is not positioned according to the baseline, but is positioned according to the line box. The top and bottom of the child element box is the outer boundary of its upper and lower margin.
1. Top
Align the top of the child element box with the top of the line box on which it is located
Because the vertical-align:top will align the top of the child element box with the top of the line box, the line box will be opened if the line box height is less than the height of the child element. Let's open the Line box with a high-altitude element and look at the effect:
As you can see, the big sub-elements open up the line box, while the child1 's margin-top outer border clings to the top of the line box.
2, Bottom
Align the bottom of the child element box with the bottom of the line box on which it is located
Similar to top, because big is used to open the line box, you do not have to modify its vertical-align value, only modify Child1 to Vertical-align:bottom, the effect:
Six, there may be a little space below the inline element
Example: This phenomenon is very common when trying to align the LI elements vertically.
<!doctype html>1. Vertical Voids
Because the LI element defaults to Vertical-align:baseline, and the lower part of the baseline leaves space for a portion of the letter, a gap is created, and the solution is to change the baseline position of the line box, to produce the desired effect. For example, set these Li to Vertical-align:middle. "Tip: plus an x effect is more obvious"
2. Horizontal gap
The horizontal gap of the LI element is caused by a newline, which becomes a blank, which is parsed into a text node in the DOM. Like the Jiangzi code below.
<ul> <li class= "box" ></li><li class= "box" ></li> <li class= "box" ></ Li></ul>The effect is as follows: There is no white space between the top 2 Li and 2 and 3 li.
But the code above is too readable, it's not beautiful, it's generally written like this
<ul> <li class= "box" ></li><!--comment go to space --><li class= "box" ></li> <li class= "box" ></li> </ul>We use a comment node instead of a blank (text node), and the annotation node renders without rendering. To learn more about the node types in the DOM, see my other article, Dom.
Analysis of the problem of vertical-align:middle to move the element down without centering
1. Questions
Now there are three inline-box blocks, the height is 100px,200px,300px, want to let the height of 100px block Vertical center, so write the following code:
<style type= "Text/css" > . ctn-block{ background-color: #bbb; } . Ctn-block. Child { display:inline-block; width:100px; Background-color:aliceblue;}. Ctn-block. child-1 { height:100px;/* vertical-align:middle;*/}.ctn-block. child-2 { height:200px;}. Ctn-block. child-3 { height:300px;} </style><p class= "Ctn-block" > <p class= "Child child-1" ></p> <p class= "Child Child-2 "></p> <p class=" Child child-3 "></p></p>Add Vertical-align:middle to the middle p, the effect becomes two, the--child-1 element moves down, but it is not centered.
2. Reason
As can be specified above, Vertical-align:middle is positioned by aligning the vertical midpoint of the child element box with the parent box's baseline plus half the x-height of the parent box.
The midpoint of the child element box is very good, and the baseline of the parent box plus the x-height of the parent box is half the position.
First, the baseline of the parent box is computed: The baseline of the three child elements walk in a straight line, the bottom of child-2 and child-3.
Then add the parent box's x-height: Because Chrome under the default font-size is 16px, and Font-family:sans-serif, so half of X-height is probably 3-4px, fully, according to the following way alignment:
3. Solutions
One way is to set the highest element to Vertical-align:middle.
Then the desired center is also set to Vertical-align:middle, the other as needed to set the Vertical-align:top/bottom.
The principle is somewhat abstract:
The first thing to be clear: after the highest element is set to Vertical-align:middle, this element is the line box for the baseline.
After the other elements are set vertical-align:top/bottom, they do not affect the baseline of the line box, so the elements that need to be set vertically are also set to Vertical-align:middle, Their baseline must be above the baseline of the highest element, so they will be forcibly moved down and centered.
. ctn-block. child-1 { height:100px; Vertical-align:middle; } . Ctn-block. child-2 { height:200px; vertical-align:top; } . Ctn-block. child-3 { height:300px; Vertical-align:middle; }4, derivative of a feasible vertical center scheme
Set a pseudo-element for the parent element: After, its height is the height of the parent element, Display:inline-block, set it to Vertical-align:middle to open the line box, and line Box's baseline is the height of the parent element at half the position. You can then set the child element Vertical-align:middle to achieve the center.
For compatibility, you need to use some hack, because IE8 does not support: after pseudo-elements, you need a span instead. And Display:inline-block also need hack.
Viii. Other applications
ico and text alignment
<style type= "Text/css" >. pop-viphead-nologinbox {width:500px; }. pop-viphead-nologin-icon {display:inline-block; width:14px; height:14px; Background:url ("Images/not_login_tip_ico.png") no-repeat; }. pop-viphead-nologin-txt {display:inline-block; Color: #333; font-size:12px; margin-left:2px; }. pop-viphead-nologin-btn {display:inline-block; margin-left:3px; }. pop-viphead-nologin-btn a {display:block; width:76px; height:25px; line-height:25px; Color: #fff; Text-align:center; Background-color: #00adee; border-radius:1px; font-size:12px; }</style><p class= "Pop-viphead-nologinbox" > <p class= "Pop-viphead-nologin-icon" ></p> < Span class= "Pop-viphead-nologin-txt" > You're not signed in yet! </span> <p class= "pop-viphead-nologin-btn" ><a href= "javascript:;" j-delegate= "lOgin "> Login now </a></p></p>I want to align the ICO on the left with the text and buttons.
. pop-viphead-nologin-icon,.pop-viphead-nologin-txt,.pop-viphead-nologin-btn{ vertical-align:middle; }
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
