测试用代码

<!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. 修改app名字

    一张图说明问题 如果没有成功clean一下,或者卸载掉原有的重新生成一下 如果要修改路径名和工程名有个复杂的方法 http://blog.sina.com.cn/s/blog_a42013280101 ...

  2. find_cmd函数分析

    一.概述 1.函数位置 common/command.c 2.函数功能分析 解析命令的关键环节是如何根据输入命令查找对应命令的信息,从而跳转到对应命令的函数处执行程序.这必然涉及到如何存放命令的详细信 ...

  3. 解决m2eclipse之Unable to update index for central |

    maven 不能更新,真烦人,转载他人的 maven是个好东西,eclipse上的maven插件m2eclipse也非常方便,但是最近这个东西经常无法连接到maven index的更新网站,然后ecl ...

  4. Swift中KIF测试的特点－b

    我最近在忙着回归到过去测试代码的老路子,使用KIF和XCTest框架,这样会使得iOS中的测试变得简单.当我开始捣鼓KIF的时候,我用Swift写的应用出了点小问题,不过最终还是很机智的搞定了.在我写 ...

  5. 工作总结：MFC自写排序算法（升序）

    最近一个需求里面需要实IP升序排序,用了qsort,结果是内部排序,甚至感觉排序结果不可预测性,于是自己写了一个外部排序. 需求如下:一个指针里面有N条记录,每条记录包含:IP,偏移地址,保留位,均占 ...

  6. ubuntu 设置root启动

    http://www.linuxidc.com/Linux/2012-05/60806.htm sudo -s 输入普通用户的password 回车即可进入root权限 vi /etc/lightdm ...

  7. check sql server edition (version 版本)

    SELECT @@VERSION refer : https://www.mssqltips.com/sqlservertip/1140/how-to-tell-what-sql-server-ver ...

  8. 【HDOJ】3325 Arithmetically Challenged

    简单DFS. /* 3325 */ #include <iostream> #include <set> #include <cstdio> #include &l ...

  9. 【STL】【模拟】Codeforces 696A Lorenzo Von Matterhorn

    题目链接: http://codeforces.com/problemset/problem/696/A 题目大意: 一个满二叉树,深度无限,节点顺序编号,k的儿子是k+k和k+k+1,一开始树上的边 ...

  10. 【动态规划】【归并】Vijos P1412 多人背包

    题目链接: https://vijos.org/p/1412 题目大意: 求01背包的前K优解,要求必须装满(1<=K<=50 0<=V<=5000 1<=N<=2 ...