W3school's description of this attribute
The vertical-align property sets the vertical alignment of the element.
Description
This attribute defines the element rows relative to the baseline where baseline is perpendicular to the element row are aligned . Allows you to specify negative length values and percentage values. This will lower the element rather than raise it. In table cells, this property will set the alignment of the cell content in the cell box. The default value is baseline and inheritance is no.
Browser support
All browsers support the vertical-align attribute.
Notes:
No version of Internet Explorer supports the attribute value "inherit".
Possible value
| value | description |
|---|---|
| baseline | default. The element is placed on the baseline of the parent element. |
| sub | Align the subscript of the text vertically. |
| super | Align the superscript of the text vertically. |
| top | Align the top of the element with the top of the tallest element in the row. |
| text-top | Align the top of the element with the top of the parent element’s font. |
| middle | Place this element in the middle of the parent element. |
| bottom | Align the bottom of the element with the bottom of the lowest element in the row. |
| text-bottom | Align the bottom of the element with the bottom of the parent element's font. |
| length | |
| % | Use the percentage value of the "line-height" attribute to arrange this element. Negative values are allowed. |
| inherit | Specifies that the value of the vertical-align attribute should be inherited from the parent element. |
Replaced elements and non-replaced elements
When the front of the display mode of learning elements, is why there is a problem like imginline elements like this can be set wide block elements of higher property?
Replacement element
The elements that the browser judges the specific content of the display based on the attributes of the tag are called replacement elements (these elements do not directly give the displayed content), and the replacement elements generally have a fixed size (specific width-to-height or aspect ratio).
For example: when the browser encounters the img tag, it will display the content according to its src attribute, because when we examine the element, we can't see the entity image, only its src attribute. When a similar browser encounters an input tag, it will choose to display an input box or a select box or other types according to the type attribute of the input.
Non-replacement element
Non-replacement elements like p, span, div and other tags, they directly present the content to the browser, and then directly display it.
Replacement elements and non-replacement elements are not just the classification of inline elements, but the classification of elements in the entire HTML. This means that block-level elements are also divided into replaced elements and non-replaced elements.
Learning of vertical-align attributes
The meaning of the vertical-align attribute is actually not difficult to understand, what is difficult to understand is the form of expression in the actual situation. I don't think I have fully understood the application under various actual scenarios, and the performance of each browser is different. So I don't think there is any need to go deep into the attribute value one by one (and then come back later). At this stage, you only need to learn the following two application scenarios. There is also this article ( article link ) that I personally think is very useful for our theoretical understanding and learning of this attribute.
- In actual development, we sometimes encounter small icons and text when used together, but there is no effect of alignment between text and pictures. We only need to add a vertical-align: middle; statement to the image to get the middle alignment effect. For example, the following are a few lines of code when I write a static page.
<style>
.login {
float: right;
margin: 36px 0px;
}
.login img {
/*vertical-align: middle;*/
}
.name {
margin: 0 35px 0 3px ;
/*行内元素可以设置左右外边距，左右有效，上下无效。*/
}
</style>
<div class="login">
<img src="img/icon1.png" alt="" />
<span class="name">
qq_leishui
</span>
</div>
When the vertical-align attribute is not added to the image
After adding vertical-align: middle; attribute
- There is another situation when putting in the picture, because the default vertical-align: baseline; so there will be a blank gap under the picture by default.
<style>
div{
margin: 100px 0 0 100px;
border: solid 2px;
}
</style>
<body>
<div>
<img src="img/图10.1.png" alt="" />
</div>
</body>
As shown
For example, the picture of the page I learned to write at the beginning:
<style>
/*.content1 li img{
vertical-align: bottom;
}*/
</style>
<body>
<li>
<a href="#">
<img src="img/c6.png" alt="" />
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<p><strong>高级</strong> · 1125人在学习</p>
</a>
</li>
</body>
As shown in the figure, there will be unnecessary blank gaps between the picture and the text below (actually the distance between the baseline of the picture and the line box, please refer to the link above for specific concepts). The gap disappears after adding the vertical-align: bottom; property.
Maybe these small exercises we did during our study sometimes didn't pay attention to this problem and it won't affect you to continue writing. But if you strictly require yourself to be consistent with the size of the psd file for the exercise, you must pay attention to this problem. (I didn't pay attention to this issue when I first wrote this page, and then I kept wondering why the size is not right.)
Of course, there are many ways to solve this problem, such as using display: block; to convert pictures into block-level elements, setting floats, and so on.
Dust / 2020/12/22