测试用代码

<!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. bzoj2597: [Wc2007]剪刀石头布

    Description 在一些一对一游戏的比赛(如下棋.乒乓球和羽毛球的单打)中,我们经常会遇到A胜过B,B胜过C而C又胜过A的有趣情况,不妨形象的称之为剪刀石头布情况.有的时候,无聊的人们会津津乐道 ...

  2. call stack 如何调用

    现在在处理MFC上面的BUG,比较多,刚接触堆债,自我感觉找BUG很好用,总结一下记下来: 1. VS环境在程序F5运行状态下/DEBUG/Windows/Call Stack 即可调用堆债: 2. ...

  3. Fastreport怎么样在同一页上下部分打印相同内容

    使用FastReport遇到个难题,不知道怎么解决 分组打印之后,需要同一页上下部分打印相同内容,就是一式两份的联单打印. 例如: 送货单 ********** A 这里上半页,地区分组之后的内容 * ...

  4. Computational Methods in Bayesian Analysis

    Computational Methods in Bayesian Analysis Computational Methods in Bayesian Analysis  [Markov chain ...

  5. hdu 5063 Operation the Sequence

    http://acm.hdu.edu.cn/showproblem.php?pid=5063 思路:因为3查询最多50,所以可以在查询的时候逆操作找到原来的位置,然后再求查询的值. #include ...

  6. javascript 路线整理

    前端开发很重要,编写脚本也不容易. 总结我以前的前端学习经历,基本是一团乱麻:css+javascript是在大三自学的,当时自己做课程设计,逼着自己在一个月之内,写了一个半成品的j2ee网站.当时, ...

  7. 动态规划（斜率优化）：[CEOI2004]锯木厂选址

    锯木场选址(CEOI2004) 从山顶上到山底下沿着一条直线种植了n棵老树.当地的政府决定把他们砍下来.为了不浪费任何一棵木材,树被砍倒后要运送到锯木厂. 木材只能按照一个方向运输:朝山下运.山脚下有 ...

  8. 综合查询员工和datetime.now和datetime.today区别

    一:综合查询图 二:EmployeeListWindow.cs代码 using System; using System.Collections.Generic; using System.Compo ...

  9. hdu 4424 & zoj 3659 Conquer a New Region (并查集 + 贪心)

    Conquer a New Region Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...

  10. Python里的map、reduce、filter、lambda、列表推导式

    Map函数: 原型:map(function, sequence),作用是将一个列表映射到另一个列表, 使用方法: def f(x): return x**2 l = range(1,10) map( ...