So by default, pictures, buttons, text and cells can all use the vertical-align attribute.
Value:
The code is as follows:
vertical-align: baseline|length|percentage|sub|super|top|middle|bottom|text-top|text- bottom|initial|inherit;
3. baseline
##1. The letter 'x' and baseline The lower edge (line) of the letter x is the baseline. Not letters with tails like the letter s
##The baseline is even derived from:
1. “alphabetic” baseline: “letter” baseline – English
2. “hanging” baseline: “hanging” baseline – Indian
3. “ideographic” baseline: “ideographic” baseline – Chinese
1. The baseline of an inline-table element is the baseline of the first row of its table.
2. The baseline of the parent element [line box] is the baseline of the last inline box.
3. Baseline determination rules for inline-block elements
Rule 1: If there is a line box inside the inline-block element, the baseline of the inline-block element is the last one that exists as content The baseline of the element [inline box], and the baseline of this element is determined based on itself.
Rule 2: If there is no line box inside the inline-block element or its overflow attribute is not visible, then the baseline will be the bottom margin of the inline-block element.
3. Example: inline-block example
Description of the above picture:
From the left in the above picture There are line-block elements to the right. The red line represents the boundary of the margin-box, and the blue line represents the baseline; yellow is the border, green is padding, and blue is content.
The left element contains content c that does not break away from the normal flow. In addition to the content c that does not break away from the normal flow, the middle element also adds overflow:hidden. The right element has no content, but the content area has width and height.
Analyze the baseline of the inline-block element in various situations in the figure:
On the left of the above figure, the inline-block element has content in normal flow, according to rule 1 , so the baseline of inline-block is the baseline of the last element that exists as content, which is the baseline of content c, and the baseline of c is determined by itself, which is the blue color in the picture.
In the above picture, the inline-block element overflow:hidden is not visible. According to rule 2, the inline-block element baseline is the lower boundary of the margin-box of the inline-block element, which is the blue in the picture. Wire.
On the right side of the above figure, the inline-block element has no content. According to rule 2, its baseline is the lower boundary of the margin-box, which is the blue line.
4. Example: Baseline determination 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> Copy after login
Analysis:
The base-line of the parent element .ctn-block is the baseline of Gg.
The inline-block element has no internal line box and no overflow:visible setting, so Its baseline is the bottom margin boundary.
4. Vertical-align is based on different values of baseline
1. Baseline
will sub-elements The box's baseline is aligned with the parent box's baseline.
2, middle
Add the vertical midpoint of the element box to the baseline of the parent box plus the x-height of the parent box Align the half position of
The vertical midpoint of the element box here is easy to determine, and the baseline of the parent box is also easy to determine, but the x-height needs to be calculated. This x-height is the height of the letter x.
3. text-top
Align the top of the box (margin-top border) with the top of the text area of the parent box
Inspect the box to see the top of the margin-top.
Inspect the text and see that the upper boundary of the blue area is the top of the text area.
The final effect is that the top of the box is aligned with the top of the parent box text area.
4, text-bottom
Align the bottom of the box (margin-bottom boundary) with the bottom of the text area of the parent box
and Text-top is similar, but aligns the margin-bottom of the child element with the lower border of the text area.
5, sub
Lower 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, which is the lower boundary of margin-bottom, but the subscript position of the parent box is too difficult to understand. . . First, we need to understand the concept of subscript. We can add subscripts to text through the tag, and modify the content in to GgGg , which will have the following effect.
#This is to align the margin-bottom lower border of the element with the subscript's baseline.
6, super
Raise the baseline of the element box to the appropriate superscript position of the parent box.
Corresponding to sub, super is promoted to the baseline of the superscript content, and the superscript is first created through the tag.
7. Percentage
Percentage: raise (positive value) or lower (negative value) the child element box , the specific raising/lowering value is calculated by multiplying the line-height value of the parent box by the percentage. If the percentage is 0%, it is the same as vertical-align:baseline.
This is quite easy to understand. It is equivalent to raising or lowering the baseline of the child element box. The specific value is the percentage multiplied by the line-height of the parent box.
In this example, the line-height of the parent box is 200px, so if it is set to 25%, the element should move up 50px.
is not very intuitive. Add a transform: translate(0, 50px); [relatively moved down 50px], and it will move to the familiar position again. .
8, length
Raise (positive value) or lower (negative value) the child element box. The value is the distance to raise/lower. If it is 0, it is the same as vertical-align:baseline.
Using our most commonly used px as the unit, setting vertical-align:50px, the effect is the same as the above percentage of 25% (200px*25%=50px), no example will be given.
5. Different values of vertical-align based on line box
When vertical-align is set to top and bottom, it is not It is positioned according to the baseline, but based on the line box. The top and bottom of the child element box are the outer boundaries of its upper and lower margins.
1, top
Align the top of the child element box with the top of the line box where it is located
Because vertical-align:top will make The top of the child element box is aligned with the top of the line box, and if the height of the line box is less than the height of the child element, the line box will be stretched. Let’s first use a higher-height element to open the line box, and then see the effect:
可以看到，big子元素撑开了line box，而child1的margin-top外边界紧贴在line box的顶端。
2、bottom
将子元素盒子的底部和其所在的line box底部对齐
和top类似，由于big用于撑开line box，可以不必修改其vertical-align的值，仅修改child1为vertical-align:bottom，效果：
六、inline元素下方可能会有一点空隙
例子：尝试将li元素在垂直方向上进行对齐的话，这个现象非常常见
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
background-color: bisque;
}
.box { display: inline-block;
width: 100px;
height: 100px;
background-color: aliceblue;
/* vertical-align: middle;*/
}
</style>
</head>
<body>
<ul>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
</body>
</html> Copy after login
1、垂直空隙
因为li元素默认vertical-align:baseline，而baseline的下方会给字母的一部分留出空间，因此会产生一个空隙，要产生理想的效果，解决方案就是改变line box的baseline位置，比如将这些li设置为vertical-align:middle。【tip:加一个x效果更明显】
2、水平空隙
li元素的水平空隙是因为换行引起的，这个换行会变成一个空白，这个空白会被解析为DOM中的文本节点。比如像下面酱紫的代码。
<ul>
<li class="box"></li><li class="box"></li>
<li class="box"></li>
</ul> Copy after login
效果如下：因为前2个li之间没有空白，而2和3个li之间有空白。
但是上面的代码可读性太差，也不美观，一般这样写
<ul>
<li class="box"></li><!-- 注释去空格
--><li class="box"></li>
<li class="box"></li>
</ul> Copy after login
我们用一个注释节点代替空白（文本节点），而注释节点渲染的时候是不渲染的。了解更多DOM中的节点类型，可看我的另一篇文章《DOM》。
七、vertical-align:middle让元素下移而不居中的问题分析
1、问题
现在有三个inline-box块，高度分别为100px，200px，300px，想让高度为100px的块垂直居中，于是写出了如下代码：
<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> Copy after login
给中间p加上vertical-align:middle，效果变为上图二的样子——child-1元素下移了，但是却没有居中。
2、原因
从上面可以指定，vertical-align:middle的定位方式是：将子元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐。
子元素盒子的中点很好算，而父盒子的baseline加上父盒子的x-height一半位置又是什么呢？
首先计算父盒子的baseline：三个子元素的baseline走在一条直线上，就是child-2和child-3的底部。
然后加上父盒子的x-height：由于chrome下默认font-size是16px，而font-family:sans-serif，所以x-height的一半大概是3-4px，综上，按照如下方式对齐：
3、 解决方案
一种方式是将最高的元素设为vertical-align:middle。
然后将想要居中的也设定为vertical-align:middle，其他的根据需要设定vertical-align:top/bottom。
原理有点抽象：
首先明确一点：最高元素设定为vertical-align:middle后，这个元素对于line box来说，baseline就是其中线。
其他元素设置vertical-align:top/bottom后，它们不影响line box的baseline，所以再将需要设定垂直居中的元素也设定为vertical-align:middle，它们的baseline必然在最高元素的baseline之上，所以会会被强制下移，进行居中。
.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;
} Copy after login
4、衍生的一种可行的垂直居中方案
为父元素设定一个伪元素：：after,其高度为父元素的高度，display:inline-block,将其设定为vertical-align:middle即可撑开line box，同时line box的baseline为父元素高度一半的位置。然后设定子元素vertical-align:middle，即可实现居中。
考虑兼容性的话，这里需要使用一些hack，由于IE8不支持::after伪元素，所以需要一个span来替代。而display:inline-block亦需要hack。
八、其他应用
ico和文字对齐
<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">您还没有登录哦！</span>
<p class="pop-viphead-nologin-btn"><a href="javascript:;" j-delegate="login">立即登录</a></p>
</p> Copy after login
我想让左边ico和文字，按钮都对齐。
.pop-viphead-nologin-icon,.pop-viphead-nologin-txt,.pop-viphead-nologin-btn{
vertical-align: middle;
} Copy after login
The above is the detailed content of Detailed explanation of vertical-align attribute examples in css. For more information, please follow other related articles on the PHP Chinese website!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
