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)为字体的高度, ...
随机推荐
- js 解决两值交换
总结七种办法来交换a和b的变量值 交换变量值方案一 最最最简单的办法就是使用一个临时变量了 不过使用临时变量的方法实在是太low了 var t; t = a; a = b; b = t; 首先把a ...
- os与sys模块
os 1.os.pardir #获取当前目录的父目录字符串名:('..') 2.os.mkdir('dirname') #创建单级目录:相当于shell中mkdir dirname 3.os.make ...
- codeforces932E Team Work
题目链接:CF932E 由第二类斯特林数知 \[ n^m=\sum_{i=0}^nS(m,i)*i!*\dbinom{n}{i} \] \[ \begin{aligned} \sum_{i=1}^n ...
- Oracle中的AWR,全称为Automatic Workload Repository
Oracle中的AWR,全称为Automatic Workload Repository,自动负载信息库.它收集关于特定数据库的操作统计信息和其他统计信息,Oracle以固定的时间间隔(默认为1个小时 ...
- Linux系统扩容根目录磁盘空间的操作方法
问题描述 系统的服务无法正常运行,查看磁盘空间,发现根目录已经满了 解决过程 1.添加磁盘空间 2.使用fdisk -l命令查看磁盘信息 3.新建磁盘分区 4.使用fdisk /dev/sda3, 创 ...
- ICPC China Nanchang National Invitational -- D. Match Stick Game(dp)
题目链接:https://nanti.jisuanke.com/t/38223 题意:有一堆火柴构成了一个加减法式子,你可以把火柴重新组合,要求数字个数和原来一样多,每个数字的位数和对应原数字位数一样 ...
- linux 单用户密码修改
1.启动系统,并在GRUB2启动屏显时,按下e键进入编辑模式. 2.在linux16/inux/linuxef所在参数行ro更改为init=/sysroot/bin/sh 3.按Crl+x启动到she ...
- re模块正则表达式
regular expression / regex / RE 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配.Python 自1.5版本起增加了re 模块,它提供 ...
- 【优秀的iPhone/iPad数据恢复工具】Omni Recover for Mac 2.5
[简介] 今天和大家分享最新的 Omni Recover for Mac 2.5 版本,这是一款Mac上优秀的iPhone/iPad设备数据恢复工具,支持恢复误删除的短信.照片.视频.文档.通话记录等 ...
- MD5算法 —— C语言实现(字符串的加密)
转 https://blog.csdn.net/weixin_42167759/article/details/81209320 网上找到的实现md5函数代码,包括一个头文件md5.h和一个源文件md ...