vertical-align作用的前提++图片不上下居中
5.3.2 vertical-align
作用的前提
很多人,尤其CSS新手,会问这么一个问题:“为什么我设置了vertical-align
却没任何作用?”
因为vertical-align
起作用是有前提条件的,这个前提条件就是:只能应用于内联元素以及display
值为table-cell
的元素。
换句话说,vertical-align
属性只能作用在display
计算值为inline
、inline- block
,inline-table
或table-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作用的前提++图片不上下居中的更多相关文章
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式!
块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...
- css怎么让图片垂直左右居中?(外层div是浮动且按照百分比排列)
一.原始的居中方法是把div换成table <div style="width: 500px; height: 200px; border: solid 1px red; text-a ...
- 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)
第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...
- align使图片和文字居中
<img src=... align=absmiddle />
- vertical起作用的条件
只有当display为行内块元素时(inline-block),vertical-align:middle:才生效,或者将display设置为table-cell,需要多行文字居中时才需要,单行文字, ...
- 关于Vertical Align的理解
1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...
- 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)
经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
随机推荐
- Go语言中DateTime知识点
一.基本使用 ①从属于time这个包 ②一般使用都是使用 time.Time 这个类型表示时间 ,time包中还有一些常量,源码如下 // Common durations. There is no ...
- Python实现常用排序算法
Python实现常用排序算法 冒泡排序 思路: 它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完 ...
- LOJ 6281 数列分块入门 5
简化版题意 给出一个长为n的数列,以及n个操作,操作涉及区间开方(每个数都向下取整),区间求和,保证所有数都为有符号32位正整数. N<=50000 Solution 首先我们先思考: 一个有符 ...
- mysql常用的用户授权语句
一:授权主要的 SQL //某个数据库所有的权限 ALL 后面+ PRIVILEGES GRANT ALL PRIVILEGES ON 库名.* TO '用户'@'%' IDENTIFIED BY ' ...
- Django web编程2 -- 编辑页面内容
你将创建一些表单,让用户能够添加主题和条目,以及编辑既有的条目.你还将学习Django如何防范对基于表单的网页发起的常见攻击,这让你无需花太多时间考虑确保应用程序安全的问题. 然后,我们将实现一个用户 ...
- Python的优势及应用领域
Python的优势 Python是一门解释型语言,是比较容易入门. Python的程序代码更接近英语,更好好理解. Python的扩展库非常丰富. Python与C的粘合性非常好. Python的缺点 ...
- ES 常用java api
java rest client 有两种: 1.Java Low Level REST Client :用于Elasticsearch的官方低层客户端.它允许通过http与Elasticsearch集 ...
- .NET Core微服务系列基础文章
今年从原来的Team里面被抽出来加入了新的Team,开始做Java微服务的开发工作,接触了Spring Boot, Spring Cloud等技术栈,对微服务这种架构有了一个感性的认识.虽然只做了两个 ...
- [面试]Actor模型
Actor模型 面试中自己说话不利落, 或者自己对知识点认识不全面.在这里进行一下记录. 理论部分都是收集(copy)自网上其他的博客. 什么是Actor模型 参与者模式(英语:Actor model ...
- vue开发常用配置
// src/main.js function setHtmlFontSize() { const baseSize = 100 // 由于浏览器字体最小为12px,故这个值要设置大一点,保证计算所得 ...