测试用代码

<!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各属性对比的更多相关文章

  1. What is Vertical Align?

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

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

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

  3. JS键盘事件对象之keyCode、charCode、which属性对比

    先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这 ...

  4. JavaScript&&jQuery创建新节点和操作属性对比

    JavaScript创建新节点和操作属性 通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的. <!DOCTYPE html> <html lang="e ...

  5. 关于Vertical Align的理解

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

  6. Struts2 和 spring mvc的 迭代标签常用属性对比

    <s:iterator value="#users" var="u" status="st"> <c:forEach  i ...

  7. align=absMiddle属性设置

    AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐.AbsMiddle 图像的中间与同一行中最大元素的中间对齐.Baseline 图像的下边缘与第一行文本的下边缘对齐.Bottom 图像的 ...

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

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

  9. js和JQuery中offset等属性对比

    HTML: 内容在滚动条下面 <div id="outerDiv"> <div id="myDiv" class="myDiv&qu ...

随机推荐

  1. 最简单理解CGI,FastCGI,WSGI

    CGI规定了如何执行本地脚本技术规范(协议),FastCGI规定了如何远程请求执行脚本的技术规范,WSGI规定了如何请求执行Python脚本的规范. 他们的相同点就是envionment variab ...

  2. C#,Java,C++中的finally关键字

    博客原文:http://hankjin.blog.163.com/blog/static/33731937201031511305338/ 先说C++,标准C++不支持finally, 如果要实现fi ...

  3. unity3d中脚本生命周期（MonoBehaviour lifecycle）

    最近在做一个小示例,发现类继承于MonoBehaviour的类,有很多个方法,于是乎必然要问出一个问题:这么多个方法,执行先后顺序是如何的呢?内部是如何进行管理的呢?于是在网上找了许多资料,发现了Ri ...

  4. [BZOJ 1875] [SDOI 2009] HH去散步【矩阵乘法】

    题目链接:BZOJ - 1875 题目分析: 这道题如果去掉“不会立刻沿着刚刚走来的路走回”的限制,直接用邻接矩阵跑矩阵乘法就可以了.然而现在加了这个限制,建图的方式就要做一些改变.如果我们把每一条边 ...

  5. 【技术贴】第二篇 ：解决使用maven jetty启动后无法加载修改过后的静态资源

    之前写过第一篇:[技术贴]解决使用maven jetty启动后无法加载修改过后的静态资源 一直用着挺舒服的,直到今天,出现了又不能修改静态js,jsp等资源的现象.很是苦闷. 经过调错处理之后,发现是 ...

  6. cf D Bear and Floodlight

    题意:有n个灯,每个灯有一个照亮的角度,现在从点(l,0)走到点(r,0),问这个人若一直被灯照着能最多走多远? 思路:状压dp,然后通过向量旋转求出点(dp[i[,0)与灯的坐标(p[j].x,p[ ...

  7. Linux&shell 之基本Shell命令

    写在前面:案例.常用.归类.解释说明.(By Jim) 文件和目录列表lsls -F (用斜杠区分目录和文件)ls -a (把隐藏文件一并显示出来)ls -l (同ll,显示详细信息)ls -l 文件 ...

  8. bzoj3280

    bzoj1221的变形版本,弄懂1221,这题还是很简单的 ; type node=record        point,next,flow,cost:longint;      end; ..] ...

  9. BZOJ1621: [Usaco2008 Open]Roads Around The Farm分岔路口

    1621: [Usaco2008 Open]Roads Around The Farm分岔路口 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 521  S ...

  10. 【模拟】FOJ 2244 Daxia want to buy house

    题目链接: http://acm.fzu.edu.cn/problem.php?pid=2244 题目大意: 每月还款额=贷款本金×[月利率×(1+月利率)^还款月数]÷[(1+月利率)^还款月数-1 ...