测试用代码

<!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演示

    app下载地址:https://itunes.apple.com/cn/app/zhang-jiang-zai-xian/id722630317?mt=8

  2. iOS播放短的音效

    在IOS中,有的时候需要播放很简短的声音文件,比如系统声音等,我们需要使用到下面的方式来播放声音: // 一.引入头文件 #import <AudioToolbox/AudioToolbox.h ...

  3. event.preventDefault和恢复元素默认事件

    写页面事件的时候,有的时候需要用event.preventDefault取消原有的事件后进行重写,这个大家应该都知道. 那么怎么在取消默认事件后再恢复呢. 解绑我们自定义的事件就好了. 以Jquery ...

  4. 转:简单介绍 P3P 技术

    原文来自于:http://blog.csdn.net/ghj1976/article/details/4889219 以 Internet Explorer 为例,默认情况下,IE的隐私策略如下图所设 ...

  5. Mongodb2.6升级到Mongodb3.0.2笔记

    PS:升级到3版本的Mongodb以后,drop集合是可以直接释放磁盘空间的 停止老版本Mongodb >use admin >db.shutdownServer(); 下载解压新版本Mo ...

  6. 辉哥用的这种方法实现ZABBIX的MYSQL批量监控

    不错的.集中和分布式,总是一对要解决的问题.应该可以再想更好的策略~~ 一.方案需求及思路 因跑MySQL服务的服务器比较多,并且每台服务器可能会运行多个不同端口的数据库,如果单独手动一台一台去修改a ...

  7. c++实现委托

    #include "stdafx.h" #include <iostream> #include <string> using namespace std; ...

  8. 华为5700交换机通过外部开源protal和本地aaa用户认证的一些问题

    http://support.huawei.com/ecommunity/bbs/10178271.html?p=1#p0 华为5700交换机通过外部开源protal和本地aaa用户认证的一些问题 各 ...

  9. WallsEveryDay 必应桌面壁纸

    软件名:WallsEveryday 陈述: 无聊时写着玩的一个桌面壁纸的软件,壁纸是自动从必应下载,所以每天都会有新的. 在ubuntu上测试通过,windows上找了台win7测试通过,其他没测试. ...

  10. 【扩展欧几里德】Vijos P1009 清帝之惑之康熙

    题目链接: https://vijos.org/p/1009 题目大意: 两个人,一个在坐标x,每天走m,一个在坐标y,每天走n,坐标长L,问几天后碰面. 题目思路: [扩展欧几里德] 根据同余方程的 ...