码迷,mamicode.com
首页 > 其他好文 > 详细

vertical-align作用的前提++图片不上下居中

时间:2019-04-06 18:40:28      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:高度   行高   替换   oat   标签   lin   很多   button   size   

很多人,尤其CSS新手,会问这么一个问题:“为什么我设置了vertical-align却没任何作用?”

因为vertical-align起作用是有前提条件的,这个前提条件就是:只能应用于内联元素以及display值为table-cell的元素。

换句话说,vertical-align属性只能作用在display计算值为inlineinline- blockinline-tabletable-cell的元素上。因此,默认情况下,<span>< strong><em>等内联元素,<img><button><input>等替换元素,非HTML规范的自定义标签元素,以及<td>单元格,都是支持vertical-align属性的,其他块级元素则不支持。

 

当然,现实世界是没有这么简单的。CSS世界中,有一些CSS属性值会在背后默默地改变元素display属性的计算值,从而导致vertical-align不起作用。比方说,浮动和绝对定位会让元素块状化,因此,下面的代码组合vertical-align是没有理由出现的:

.example {
  float: left;
  vertical-align: middle; /* 没有作用 */
}
.example {
  position: absolute;
  vertical-align: middle; /* 没有作用 */
}



.box {
  height: 128px;
}
.box > img {
  height: 96px;
  vertical-align: middle;
}
<div class="box">
  <img src="1.jpg">
</div>

此时图片顶着.box元素的上边缘显示,根本没垂直居中,完全没起作用!

这种情况看上去是vertical-align:middle没起作用,实际上,vertical-align是在努力地渲染的,只是行框盒子前面的“幽灵空白节点”高度太小,如果我们通过设置一个足够大的行高让“幽灵空白节点”高度足够,就会看到vertical-align:middle起作用了, CSS代码如下:

.box {
  height: 128px;
  line-height: 128px;  /* 关键CSS属性 */
}
.box > img {
  height: 96px;
  vertical-align: middle;
}
 

vertical-align作用的前提++图片不上下居中

标签:高度   行高   替换   oat   标签   lin   很多   button   size   

原文地址:https://www.cnblogs.com/chengfengchi/p/10662283.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!