<body>
<img src="显示和隐藏/tu.png" alt="">
图片和文字是默认基线(baseline)对齐,这样会导致图片下方出现3px的空隙,
解决方法是使用其他的对齐方式,比如middle,top等等,
vertical-align大多是行内块和文字的对齐方式,比如img和input
</body>

1、图片和文字是默认基线(baseline)对齐,这样会导致图片下方出现3px的空隙


2、解决方法是使用其他的对齐方式,比如middle,top等等

<style>
img{
vertical-align: top;
vertical-align: middle;
}

3、使用浮动使文字环绕似乎更美观

<style>
img{
float: left;
}

注意:vertical-align大多是行内块和文字的对齐方式,比如img和input

垂直对齐vertical-align的更多相关文章

  1. vertical-align表单元素垂直对齐

    原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前 ...

  2. Xamarin.Android 水平对齐与垂直对齐

    水平对齐: 1.LinearLayout添加属性:android:orientation="vertical": 2.元件添加属性:android:layout_gravity=& ...

  3. HTML 表格垂直对齐方式

    HTML表格标记教程(25):行的垂直对齐属性VALIGN在垂直方向上,可以设定行的对齐方式,分别有居上.居中.居下3种.基本语法<TR VALIGN="TOP">&l ...

  4. vertical-align 属性设置元素的垂直对齐方式。

     值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...

  5. 【css基础】文本对齐,水平对齐,垂直对齐

    先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注 ...

  6. CSS之垂直对齐

    vertical-align: baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text ...

  7. 垂直对齐:vertical-align:super属性

    <p style=”vertical-align:super;”>垂直对齐<span>上标</span></p> <p>元素默认为块级元素, ...

  8. 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align

    一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...

  9. vertical-align垂直对齐用法

    一.垂直对齐方式{vertical-align:middle/top/bottom:} <img>垂直对齐方式:1)给自身加vertical-align:再设置line-height即可: ...

  10. 使用vertical-align实现垂直对齐

    关于垂直对齐,之前研究过好几次了,但感觉每次都没研究透彻,做了几个效果,就觉得自己掌握了,实在是自欺欺人.真乃搞技术的大忌. 这两天又下定决心重新开始研究vertical-allign这个高深莫测的属 ...

随机推荐

  1. 全栈项目|小书架|微信小程序-项目结构设计分包

    前面的文章 介绍了服务端的基础搭建以及用户模块的设计,接下来就是在服务端和客户端实现具体的业务了. 本篇文章先来介绍微信小程序开发的项目结构设计,也就是项目分包情况. 由于项目是在<极客时间-9 ...

  2. IdentityServer4:发布环境的数字签名证书

    一,jwt的三个组成部件 先来看一个由IdentityServer颁发的一个标准令牌 eyJhbGciOiJSUzI1NiIsImtpZCI6IjBiNTE3ZjIzYWY0OGM4ZjkyZjExM ...

  3. Abp session和Cookie

    问道 面向Abp 在面向服务的时候,Session 干嘛用? 先把Session 的作用说了,但是在微服务环境下给忽略了,相当于忽略了核心. Session 只是个功能.就是根据Cookie 的Ses ...

  4. NEST analyze与mapping

    /// <summary> /// POST /_analyze?pretty=true /// POST /employee/_analyze /// </summary> ...

  5. 利用PHPExcel快速导出excel

    <?php $objPHPExcel = new PHPExcel(); $objSheet = $objPHPExcel->getActiveSheet(); $array = arra ...

  6. vue+ElementUI+高德API地址模糊搜索(自定义UI组件)

    开发环境描述: Vue.js ElementUI 高德地图API 需求描述: 在新增地址信息的时候,我们需要根据input输入的关键字调用地图的输入提示API,获取到返回的数据,并根据这些数据生成下拉 ...

  7. MySql 严格模式相关配置

    目录 MySql 严格模式 MySQL的sql_mode合理设置 sql model 常用来解决下面几类问题 sql_mode常用值 注意 改为严格模式后可能会存在的问题 模式设置和修改(以解决上述问 ...

  8. 智慧图携手DataPipeline,让实体商业更智慧!

    近日,国内领先的实体商业数字化运营服务商智慧图携手DataPipeline,基于专业的数据集成与应用基础展开了合作. 未来DataPipeline将通过不断提升自身产品和服务实力,与智慧图一道致力于帮 ...

  9. springboot学习入门简易版六---springboot2.0整合全局捕获异常及log4j日志(12-13)

    使用Aop实现 1创建异常请求 在原有项目基础上,jspController中创建一个可能发生异常的请求: /** * 全局捕获异常测试 * @param i * @return */ @Reques ...

  10. Chrome谷歌浏览器插件-小结

    1.小插件库: Tampermonkey https://chrome.google.com/webstore/detail/tampermonkey-beta/gcalenpjmijncebpfij ...