Detailed explanation of vertical-align attribute examples in css

'table-cell 'Element

3. 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:

2. Baseline determination rules

1. The baseline of an inline-table element is the baseline of the first row of its table.

3. Example: inline-block example

Description of the above picture:

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.

4. Example: Baseline determination rule example

Example:

 
 
 Gg 

Analysis:

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 into 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元素在垂直方向上进行对齐的话，这个现象非常常见

1、垂直空隙

因为li元素默认vertical-align:baseline，而baseline的下方会给字母的一部分留出空间，因此会产生一个空隙，要产生理想的效果，解决方案就是改变line box的baseline位置，比如将这些li设置为vertical-align:middle。【tip:加一个x效果更明显】

2、水平空隙

li元素的水平空隙是因为换行引起的，这个换行会变成一个空白，这个空白会被解析为DOM中的文本节点。比如像下面酱紫的代码。

效果如下：因为前2个li之间没有空白，而2和3个li之间有空白。

但是上面的代码可读性太差，也不美观，一般这样写

我们用一个注释节点代替空白（文本节点），而注释节点渲染的时候是不渲染的。了解更多DOM中的节点类型，可看我的另一篇文章《DOM》。

七、vertical-align:middle让元素下移而不居中的问题分析

1、问题

现在有三个inline-box块，高度分别为100px，200px，300px，想让高度为100px的块垂直居中，于是写出了如下代码：

给中间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; }

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和文字对齐

 
 
 您还没有登录哦！ 
立即登录
 

我想让左边ico和文字，按钮都对齐。

.pop-viphead-nologin-icon,.pop-viphead-nologin-txt,.pop-viphead-nologin-btn{ vertical-align: middle; }

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!