5.3.2 vertical-align作用的前提

很多人,尤其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作用的前提++图片不上下居中的更多相关文章

  1. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  2. 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式!

    块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...

  3. css怎么让图片垂直左右居中?(外层div是浮动且按照百分比排列)

    一.原始的居中方法是把div换成table <div style="width: 500px; height: 200px; border: solid 1px red; text-a ...

  4. 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  5. align使图片和文字居中

    <img src=...  align=absmiddle />

  6. vertical起作用的条件

    只有当display为行内块元素时(inline-block),vertical-align:middle:才生效,或者将display设置为table-cell,需要多行文字居中时才需要,单行文字, ...

  7. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  8. 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  9. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

随机推荐

  1. Go语言中DateTime知识点

    一.基本使用 ①从属于time这个包 ②一般使用都是使用 time.Time 这个类型表示时间 ,time包中还有一些常量,源码如下 // Common durations. There is no ...

  2. Python实现常用排序算法

    Python实现常用排序算法 冒泡排序 思路: 它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完 ...

  3. LOJ 6281 数列分块入门 5

    简化版题意 给出一个长为n的数列,以及n个操作,操作涉及区间开方(每个数都向下取整),区间求和,保证所有数都为有符号32位正整数. N<=50000 Solution 首先我们先思考: 一个有符 ...

  4. mysql常用的用户授权语句

    一:授权主要的 SQL //某个数据库所有的权限 ALL 后面+ PRIVILEGES GRANT ALL PRIVILEGES ON 库名.* TO '用户'@'%' IDENTIFIED BY ' ...

  5. Django web编程2 -- 编辑页面内容

    你将创建一些表单,让用户能够添加主题和条目,以及编辑既有的条目.你还将学习Django如何防范对基于表单的网页发起的常见攻击,这让你无需花太多时间考虑确保应用程序安全的问题. 然后,我们将实现一个用户 ...

  6. Python的优势及应用领域

    Python的优势 Python是一门解释型语言,是比较容易入门. Python的程序代码更接近英语,更好好理解. Python的扩展库非常丰富. Python与C的粘合性非常好. Python的缺点 ...

  7. ES 常用java api

    java rest client 有两种: 1.Java Low Level REST Client :用于Elasticsearch的官方低层客户端.它允许通过http与Elasticsearch集 ...

  8. .NET Core微服务系列基础文章

    今年从原来的Team里面被抽出来加入了新的Team,开始做Java微服务的开发工作,接触了Spring Boot, Spring Cloud等技术栈,对微服务这种架构有了一个感性的认识.虽然只做了两个 ...

  9. [面试]Actor模型

    Actor模型 面试中自己说话不利落, 或者自己对知识点认识不全面.在这里进行一下记录. 理论部分都是收集(copy)自网上其他的博客. 什么是Actor模型 参与者模式(英语:Actor model ...

  10. vue开发常用配置

    // src/main.js function setHtmlFontSize() { const baseSize = 100 // 由于浏览器字体最小为12px,故这个值要设置大一点,保证计算所得 ...