内联元素的vertical-align应用

这两天在做百度前端技术学院的习题，以检验自己html和css的学习成果，其中有个任务是实现如下图所示的效果（图片来自百度前端技术学院）

类似这种图片上带个说明文字的效果非常常见，那么它是如何实现的呢？

以下是我写的代码：

xxxxxxx前端技术
前端技术前端技术

1、首先最外层#wrap层的div设置好宽度，这里我使其宽度与img大小一致，然后设置相对定位，这是为了使子标签img能够设置绝对定位，从而使z-index设置为负，这样才能让蒙板飘在图片上方；

2、.mask蒙板根据图片实际大小设置好它的位置，蒙板本身的大小由实际需求决定，需要注意的是要设置line-height与height相等，并且font-size与内部文本中需求对齐的字体大小相同（如本例中，需要绿色竖线与白色“前端技术”4字垂直居中，而白色字体的大小为24px,，所以这里设置蒙板的文字大小也为24px），以上2条对设置内部inline-block元素的vertical-align：middle有帮助（因为在line-height与height相等的情况下，baseline的位置本身就比较接近居中了，所以后面再微调比较容易；而字体大小则是使内部的inline-block的占位高度受控（PS：这里的知识点我还没搞太清楚，无法具体解释inline-block高度不受控的原因)）；

3、内部的span和p标签要设置inline-block使vertical-align可用（vertical-align对inline元素也可使用，但如果使用inline，一方面无法设置宽高，另一方面也会导致占位高度不受控）；而垂直对齐设置middle后并不会完全垂直居中，这与蒙板的line-height值以及inline-block的占位高度有关系，通过margin-top进行微调即可；

4、最后p标签内的字体自动以baseline对齐，看起来还是比较美观的。

以下是实际完成的效果：