<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. 
						
  2. Xamarin.Android 水平对齐与垂直对齐
		
    水平对齐: 1.LinearLayout添加属性:android:orientation="vertical": 2.元件添加属性:android:layout_gravity=& ...
    
		
    3. 
						
  3. HTML  表格垂直对齐方式
		
    HTML表格标记教程(25):行的垂直对齐属性VALIGN在垂直方向上,可以设定行的对齐方式,分别有居上.居中.居下3种.基本语法<TR VALIGN="TOP">&l ...
    
		
    4. 
						
  4. vertical-align 属性设置元素的垂直对齐方式。
		
     值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...
    
		
    5. 
						
  5. 【css基础】文本对齐，水平对齐，垂直对齐
		
    先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注 ...
    
		
    6. 
						
  6. CSS之垂直对齐
		
    vertical-align: baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text ...
    
		
    7. 
						
  7. 垂直对齐：vertical-align：super属性
		
    <p style=”vertical-align:super;”>垂直对齐<span>上标</span></p> <p>元素默认为块级元素, ...
    
		
    8. 
						
  8. 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align
		
    一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...
    
		
    9. 
						
  9. vertical-align垂直对齐用法
		
    一.垂直对齐方式{vertical-align:middle/top/bottom:} <img>垂直对齐方式:1)给自身加vertical-align:再设置line-height即可: ...
    
		
    10. 
						
  10. 使用vertical-align实现垂直对齐
		
    关于垂直对齐,之前研究过好几次了,但感觉每次都没研究透彻,做了几个效果,就觉得自己掌握了,实在是自欺欺人.真乃搞技术的大忌. 这两天又下定决心重新开始研究vertical-allign这个高深莫测的属 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 【LEETCODE】46、999. Available Captures for Rook
			
    package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array *  ...
    
			
    2. 
						
  2. vue生成带logo的二维码
			
    输入命令行下载 npm install vue_qrcodes <template> <div> <qrcode :url="></qrcode&g ...
    
			
    3. 
						
  3. appium1.6在mac上环境搭建启动ios模拟器上Safari浏览器    转自：上海-悠悠
			
    前言 在mac上搭建appium踩了不少坑,先是版本低了,启动后无限重启模拟器.后来全部升级最新版本,就稳稳的了. 环境准备: 1.OS版本号10.12 2.xcode版本号8.3.2 3.appiu ...
    
			
    4. 
						
  4. UnityShader - 渲染管线
			
    定义: 显卡内部处理图像信号的并行处理单元,也称为渲染流水线 发生位置: CPU和GPU 渲染机理: 将图像所具备的图形信息(顶点.纹理.材质.摄像机位置等)经过一系列阶段的处理,最终转换为屏幕上的图 ...
    
			
    5. 
						
  5. ADO.NET 八（一个例子）
			
    可视化方式绑定 DataGridView 控件(写的不详细,结合上一篇) 使用可视化数据绑定方式可以快速完成将数据表中的数据显示在 DataGridView 控件中的操作,并可以很容易地对绑定列的属性 ...
    
			
    6. 
						
  6. 关闭 OSX 10.11 SIP (System Integrity Protection) 功能
			
    关闭 OSX 10.11 SIP (System Integrity Protection) 功能 来源 https://cms.35g.tw/coding/%E9%97%9C%E9%96%89-os ...
    
			
    7. 
						
  7. Wireless support
			
    Wireless support 参考: https://www.rhyous.com/2010/12/03/freebsd-wireless-configuring-a-wireless-inter ...
    
			
    8. 
						
  8. JAVA日期格式化yyyyMMddHHmmssSSS
			
    String nowtime = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
    
			
    9. 
						
  9. 【阿里云开发】- 安装tomcat
			
    Tomcat配置过程 1.下载Tomcat 官网地址:http://tomcat.apache.org/ 这里我用的是apache-tomcat-8.5.38.tar.gz 2.通过ftp工具将下载好 ...
    
			
    10. 
						
  10. Xcodeproj相关以及删除 多层文件夹、库、资源逻辑
			
    一.介绍Xcodeproj是CocoaPods用ruby开发的一个插件库,可以用来新建.修改Xcode工程. 二.wiki和资源Xcodeproj wiki   :https://www.rubydo ...
    
			
    11.