vertical-align各属性对比
测试用代码
<!DOCTYPE html>
<html>
<head> <style>
#dd {
//line-height: 300px;
background-color: gray;
position: relative;
font-size: 60px;
//height: 300px;
}
#dd > .middle {
position: absolute;
top: 50%;
height: 1px;
background-color: black;
left: 0;
right: 0px;
}
#dd span {
background-color: green; }
</style>
</head>
<body>
<div id="dd">
<img style="height:60px;width:100px;background-color:red;"><span>xg</span>
<div class="middle"></div>
</div>
</body>
</html>
默认的是按baseline对齐
去掉图片试试：
这里xg span的高度是60,68的高度是line-height,上图高72是图片把div撑开了，可以看出span的底部到baseline的距离是8
给img添加 vertical-align:bottom; 后：
图片和div的底边对齐
vertical-align:text-bottom
和<span>对齐
vertical-align:sub;
和vertical-align:bottom;类似，但是更低一些
vertical-align:middle;
图片偏下了
将img的height改成1试一试
原来是跟x居中对齐了
vertical-align各属性对比的更多相关文章
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- JS键盘事件对象之keyCode、charCode、which属性对比
先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这 ...
- JavaScript&&jQuery创建新节点和操作属性对比
JavaScript创建新节点和操作属性 通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的. <!DOCTYPE html> <html lang="e ...
- 关于Vertical Align的理解
1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...
- Struts2 和 spring mvc的 迭代标签常用属性对比
<s:iterator value="#users" var="u" status="st"> <c:forEach i ...
- align=absMiddle属性设置
AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐.AbsMiddle 图像的中间与同一行中最大元素的中间对齐.Baseline 图像的下边缘与第一行文本的下边缘对齐.Bottom 图像的 ...
- 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)
经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...
- js和JQuery中offset等属性对比
HTML: 内容在滚动条下面 <div id="outerDiv"> <div id="myDiv" class="myDiv&qu ...
随机推荐
- 用汇编语言研究C语言的全局变量、局部变量、参数、返回值放在哪里
前提知识 c0s调用main函数的地址: 11ah main函数的连接地址: 01fah 一.全局变量与局部变量 测试程序 int a1,a2,a3; void f(void); void g(voi ...
- 新建maven project遇到的问题
在m2e安装成功之后,开始创建maven project了,但是出现了如下错误: 结果在很偶然的情况下让我解决了,就是更新下m2.respository,点击下图中的Update Settings -
- Javascript 层次
1. HTML5, Tool, Framework ---------------------------UI: Liger UI, jQuery UI, jQuery Mobile -------- ...
- VBA -excel --遍历行
Sub filter1()Rem MsgBox ("AAAAA")Rem 1 get selected zoneRem 2 loop rows and check columnRe ...
- C#验证码使用
1.C#创建验证码 1.1 创建获取验证码页面(ValidateCode.aspx) <html xmlns="http://www.w3.org/1999/xhtml"&g ...
- POJ1416 Shredding Company(dfs)
题目链接. 分析: 这题从早上调到现在.也不算太麻烦,细节吧. 每个数字都只有两种状态,加入前一序列和不加入前一序列.DFS枚举. #include <iostream> #include ...
- bzoj1076
好像题目有点问题?且现在决定不吃的宝物以后也不能再吃好像下次还是可以吃的,就是这样然后明显是状压dp,注意这道题明显倒推更容易因为顺推很可能从一个无效状态推到有效状态 ..,..] of double ...
- （转载）PHP去掉转义后字符串中的反斜杠\函数stripslashes
(转载)http://www.beijibear.com/index.php?aid=182 addslashes()函数主要是在字符串中添加反斜杠对特殊字符进行转义,stripslashes()则是 ...
- Java---类反射(2)---类反射加强
经过前面的一篇博客,Java-类反射(1),相信大家对类反射有了一定的了解了. 下面来进行对类反射的加强,了解一下怎么通过类反射去new一个对象, 怎么通过类反射去访问其他类的方法. 怎么通过类反射去 ...
- hdu 4322 最大费用流
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4322 #include <cstdio> #include <cstring> ...