vertical-align各属性图片对比

测试用代码

<!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居中对齐了

 
时间: 2024-10-13 17:23:40

vertical-align各属性图片对比的相关文章

从图片对比的角度看启动时间

目前测启动时间用得较多的方法: 1.am start -W  只获取activity的启动时间 -W:等目标Activity启动后才返回 -n:用于设置Intent的Component 2.高速相机  以真实的用户体验去获取应用的启动时间 第一种可能得不到我们想要的. 第二种过于依赖硬件设备 冷启动:这时候你的应用程序的进程是没有创建的. 这也是大部分应用的使用场景.用户在桌面上点击你应用的 icon 之后,首先要创建进程,然后才启动 MainActivity.用户在桌面上点击这个 Activi

Android 图片对比(图片相似度)代码

声明 这俩天在做图片对比的工具,这里将对比的核心功能代码贴上来共同学习,有什么缺点和不足请大家指出,谢谢.Lee出品,转载请注明出处:http://blog.csdn.net/hnulwt/article/details/43668161 前言 我采用图片比较的方式是通过像素点逐个对比的方式来进行的.由于android内存大小的限制,我们可能 在做图片对比的时候还要考虑内存的问题,因为较大图片加载上来可能会导致OOM.网上查了查,绝大多数是使用压缩图片质量来达到目的的. 不过本文并未针对图片大小

移植MonkeyRunner的图片对比和获取子图功能的实现-UiAutomator/Robotium篇

根据前一篇文章<移植MonkeyRunner的图片对比和获取子图功能的实现-Appium篇>所述,因为Appium和MonkeyRunner有一个共同点--代码控制流程都是在客户端实现的.所以要把MonkeyRunner在PC端实现的图片比对和获取子图功能移植到同样是在PC端运行的Appium是很容易的事情,但是对于在服务器端运行的Robotium和UiAutomator就是另外一回事了. 因为在Android的sdk中,MonkeyRunner获取子图和图片比对需要用到的以下两个类是没有支持

基于python+appium通过图片对比来做的UI自动化

1.python + appium +图片对比实现UI自动化:背景:当手机需要适配不同的语言时,测试过程中易出现因为语言不熟悉,导致UIbug被遗漏(例如setting中的描述性文字显示不完整等等问题)环境搭建:需使用模块PIL,Windows版本链接地址:http://pythonware.com/products/pil/ubuntu (使用16.04虚拟机):sudo apt-get install python-imaging安装过程遭遇Unable to acquire the dpk

line height 与 vertical align

一.line height 其中代表inline box(包含上下间距,若height==line-height,则行间距=line-height - font-size/2),big代表content area. 注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因. line-height属性取值: 1. % 若自身没有设置line-height,则line-height = 父元素的font-size *

JavaScript学习笔记5 之 计时器 &amp; scroll、offset、client系列属性 &amp; 图片无缝滚动

一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行一次相应的函数(不重复) 清除计时器: clearInterval( ); clearTimeout( ); 当计时器调用执行完毕时,它将返回一个timer ID, 如果将该ID传递给clearInterval,便可以终止代码的执行. 实例: 页面布局: <div id="wrap"

20150414--商品,属性,图片入库

目录 一.商品管理 1 1.建表的考虑 1 2.添加商品 3 3.上传图片生成缩略图 5 4.封装上传函数,并生成缩略图. 6 5.商品信息入库 8 6.取出商品属性 9 7.商品属性入库 11 一.商品管理 1.建表的考虑 goods_thumb表示小图,100*100的,在列表页面中使用 商品的中图goods_img在商品的详情页面中使用. 使用is_best表示是一个精品,使用is_new是新品 is_hot是热卖 建立商品表: create table it_goods( id smal

【练习5.2】使用中心为255的图片对比高斯滤波器的平滑效果

<学习OpenCV>中文版第5章第2题 提纲 题目要求 程序代码 结果图片 题目要求: 建立一个100×100的单通道图像,将图像全部像素置零,然后设置中心像素值等于255. c.对原图用5×5过滤器平滑两次,与用9×9过滤器的结果对比,看是否相似,为什么 程序代码: 1 // OpenCVExerciseTesting.cpp : 定义控制台应用程序的入口点. 2 // 3 //D:\\Work\\Work_Programming\\Source\\Image\\lena.jpg 4 5 6

[ html drawImage createPattern ] canvas绘制图片 drawImage 属性图片平铺方式实例演示

<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="