您的位置：首页 > 其它

内联元素的vertical-align应用

2016-09-13 20:54 260 查看

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

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

以下是我写的代码：

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>mission3</title>
<style>
/*初始化*/
body, div, p {
margin: 0;
padding: 0;
}

#wrap {
width: 458px;
position: relative; /*设置绝对定位以使img能够相对于该div设置绝对定位*/
overflow: hidden;
}

/*这里的img的大小是458 x 257*/
#wrap img {
position: absolute; /*设置绝对定位使z-index生效*/
z-index: -1;
}

.mask {
margin-top: 197px; /*根据实际图片大小设置即可*/
width: 100%;
height: 60px;
line-height: 60px; /*设置line-height与height相等，方便vertical-align: middle出效果*/
background: rgba(0, 0, 0, 0.3);
font-size: 26px; /*设置与后面需求垂直对齐的字体大小相同,同样是用于使vertical-align: middle出效果*/
}

.span0 {
display: inline-block; /*vertical-align只对inline和inline-block有效，这里为了设置height，所以选inline-block*/
margin-left: 40px;
margin-top: -5px;
height: 44px;
border: 2px solid #72b16a;
vertical-align: middle;
}

.mask p {
display: inline-block; /*或者inline*/
margin-top: -5px;
vertical-align: middle;
}

.span1 {
font-size: 26px;
color: #fff;
font-family: "微软雅黑";
}

em {
font-size: 16px;
color: #72b16a;
word-spacing: 140%;
font-family: "微软雅黑";
}
</style>

</head>

<body>
<div id="wrap">
<img src="baidu.gif" alt="前端技术">
<div class="mask">
<span class="span0"></span>
<p>
<span class="span1">xxxxxxx前端技术</span>
<em>前端技术前端技术</em>
</p>
</div>
</div>

</body>
</html>

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对齐，看起来还是比较美观的。

以下是实际完成的效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航