测试用代码

<!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. SVN版本回滚~

    如果你在svn上对文件进行编辑作了修改,想撤销,那么有两种方法可以还原:1) svn revert <yourfile>2) 手动删除该文件,重新执行svn up(rm <yourf ...

  2. 完美世界-2015校园招聘-java服务器工程师-成都站

    给定一个整数,将该整数分解成多个2的幂次方相加的形式,每次都取最大的可以分解出来的2的幂次方 比如 65 64 1 1 1 2 2 package wanmanshijie; import java. ...

  3. 3、MyBatis.Net学习笔记之增删改

    增删改之前先说一下笔记1里提到的一个无法创建ISqlMapper对象的问题. <resultMaps> <resultMap id="FullResultMap" ...

  4. JSP 表单request内容

    1. 表单request内容的获取 2. request.setCharacterEncoding("utf-8")对request内容进行编码 3. fullformreques ...

  5. [BZOJ 2243] [SDOI 2011] 染色 【树链剖分】

    题目链接:BZOJ - 2243 题目分析 树链剖分...写了200+行...Debug了整整一天+... 静态读代码读了 5 遍 ,没发现错误,自己做小数据也过了. 提交之后全 WA . ————— ...

  6. 常见的HTTPS攻击方法

    0x00 背景 研究常见的https攻击方法 Beast crime breach,并针对https的特性提出一些安全部署https的建议. 针对于HTTPS的攻击,多存在于中间人攻击的环境中,主要是 ...

  7. 【Java】Java Socket编程(1)基本的术语和概念

    计算机程序能够相互联网,相互通讯,这使一切都成为可能,这也是当今互联网存在的基础.那么程序是如何通过网络相互通信的呢?这就是我记录这系列的笔记的原因.Java语言从一开始就是为了互联网而设计的,它为实 ...

  8. maven jetty plugin

    转载:http://blog.163.com/xueling1231989@126/blog/static/1026408072013101311395492/ 前言: 在 maven 下测试调试时, ...

  9. Hibernate如何一个类映射两个表

    一个User类有username,password属性,还有 otherInformation等其他属性,username和password映射到一个表,otherInformation等其他属性映射 ...

  10. html里的table如何在表格内部保留表格横线的同时去掉表格里的竖线

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...