Value description
Baseline default. The element is placed on the base line of the parent element.
Sub vertical alignment text subscript.
Super Vertical alignment
Top: align the top of the element with the top of the highest element in the row.
Text-top: align the top of the element with the top of the font of the parent element.
Middle places this element in the middle of the parent element.
Bottom aligned the top of the element with the top of the lowest element in the row.
Text-bottom align the bottom of the element with the bottom of the parent element font.
Length
% Use the percentage value of the "line-height" attribute to sort this element. Negative values are allowed.
Inherit specifies that the vertical-align attribute value should be inherited from the parent element.
We can replace the div label with the span label, remove the floating, add the display: inline-block, and then change the value, haha. The position of the small blue square is changed. This illustrates the previous conclusion.
Syntax: vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage >|< length> | inherit.
Description of values
This attribute defines the vertical alignment between the baseline of an element in a row and the baseline of the row where the element is located. The default value is baseline. The negative length Value and Percentage value can be specified. This reduces the number of elements rather than increases. In table cells, this attribute sets the cell content alignment in the cell box.
The vertical-align attribute sets the vertical alignment of elements.
It is very important that it works for in-row elements. If it is not an in-row element or is not set to display: inline or display: inline-block, various problems may occur, some have taken effect, but some have not.
Here is an example. The code is as follows:
| The code is as follows: | Copy code |
| <! Doctype html> 2 3 4 <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> 5 <style type = "text/css"> 6 * {margin: 0; padding: 0} 7 # doc {width: 990px; margin: 0 auto; margin-top: 50px ;} 8 # doc h4 {border-bottom: 1px solid #000; margin: 10px 0px ;} 9. out-box {background: # dfdfdf; color: white; padding-left: 10px; display: inline-block; line-height: 205px ;} 10. in-box {display: inline-block; width: 5px; height: 5px; background: blue; margin-right: 10px; overflow: hidden; vertical-align: middle} 11 img {vertical-align: middle ;} 12 </style> 13 <title> </title> 14 15 <body> 16 <div id = "doc"> 17 18 <span class = "out-box"> 19 <span class = "in-box"> 20 </span> study the role of vertical-align attributes 21 </span> 22 <div style = "line-height: 140px; border: 1px solid #666; font-size: 12px"> 23 <span style = "font-size: 40px; border: 1px solid #999; vertical-align: text-top;"> Front </span>. 24 </div> 25 </div> 26 </body> |
|
In ie8, 9, the display is
Vertical align and inline-block
In theory, an image is a row-level element, but it looks like a row-level block-level element. You can set the height and width for it, and it will observe, unlike other in-row elements.
Apply vertical-align to the block-level elements in the row, as shown in the figure above. This is what vertical-align has at least worried you. But that's another story.
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
