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)为字体的高度, ...
随机推荐
- Django(八)下:Model操作和Form操作、序列化操作
二.Form操作 一般会创建forms.py文件,单独存放form模块. Form 专门做数据验证,而且非常强大.有以下两个插件: fields :验证(肯定会用的) widgets:生成HTML(有 ...
- Object.clone()方法与对象的深浅拷贝
转载:[https://www.cnblogs.com/nickhan/p/8569329.html] 引言 在某些场景中,我们需要获取到一个对象的拷贝用于某些处理.这时候就可以用到Java中的Obj ...
- React Native & ES6 & emoji
React Native & ES6 & emoji && 逻辑运算符 https://developer.mozilla.org/zh-CN/docs/Web/Jav ...
- 我的第一个微信小程序
今年国庆假期的时候,在家里带宝宝.想下载一个哄宝宝玩的游戏,从 App Store上搜索了一圈,发现评分高的基本上都是收费的.因为App Store上有限免机制,所以就萌发了做一款关注限免应用的小程序 ...
- Django 后台定制自己的选择框删除函数
from django.contrib import admin from .models import Article,Category from datetime import datetime ...
- cookie 和 session 的异同
cookie和session机制是web中常用的跟踪技术,用来跟踪用户的整个会话.cookie通过在客户端记录信息确定用户的身份,session通过在服务器端记录信息确定用户身份. (1)cookie ...
- Borůvka algorithm
Borůvka algorithm 我好无聊啊,直接把wiki的算法介绍翻译一下把. wiki关于Borůvka algorithm的链接:链接 Borůvka algorithm是一个在所有边权都是 ...
- CTF--web 攻防世界web题 robots backup
攻防世界web题 robots https://adworld.xctf.org.cn/task/answer?type=web&number=3&grade=0&id=506 ...
- Linux 配置代理
在我们账号的home那有一个.bashrc文件,用来设置一些开机运行的bash命令 cd ~ ls -a vi .bashrc 我们可以在这里添加代理 export http_proxy=" ...
- 状压dp(状态压缩&&dp结合)学习笔记(持续更新)
嗯,作为一只蒟蒻,今天再次学习了状压dp(学习借鉴的博客) 但是,依旧懵逼·································· 这篇学习笔记是我个人对于状压dp的理解,如果有什么不对的 ...