<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. 分享大麦UWP版本开发历程-02.内容“高度/宽度”不同的列表展示
			
    一个成型的产品,肯定是经过了产品经理出的UE,美工设计的UI,最终到我们手里Coding,这里面最少3个人,最多就不知道会有多少人参与了.每个人脑子想的都是不一样的,我就不粘贴那个“XX眼中的XX”那 ...
    
			
    2. 
						
  2. java之struts2之异常处理
			
    1.在应用项目中,异常的出现时很正常的.而且项目上线后发生异常也很正常的.那么需要对这些异常有相应的处理机制,以便客户能够看你到更加友好的界面.Struts2中提供了异常处理机制. 2.Struts中 ...
    
			
    3. 
						
  3. IdentityServer4使用OpenIdConnect实现单点登录
			
    接上一篇:IdentityServer4实现OAuth2.0四种模式之授权码模式 前面写的四种OAuth2.0实现模式只涉及到IdentityServer4的OAuth2.0特性,并没有涉及到OenI ...
    
			
    4. 
						
  4. c#自制抽奖小程序
			
    #region 第一部分界面设计 ; Button button = new Button(); Image[] images = new Image[N]; PictureBox[] picture ...
    
			
    5. 
						
  5. springboot实现读写分离(基于Mybatis，mysql)
			
    近日工作任务较轻,有空学习学习技术,遂来研究如果实现读写分离.这里用博客记录下过程,一方面可备日后查看,同时也能分享给大家(网上的资料真的大都是抄来抄去,,还不带格式的,看的真心难受). 完整代码:h ...
    
			
    6. 
						
  6. Android笔记（五十一） 短信验证码集成——mob平台
			
    官方网站:www.mob.com 注册帐号,下载SDK,导入SDK就不说了,主要写一下简单集成如何使用,以后忘记了也可以翻着看看. 详细的可以参考官方文档: http://wiki.mob.com/a ...
    
			
    7. 
						
  7. QtCreator常用快捷键
			
    1)帮助文件:F1 (光标在函数名字或类名上,按 F1 即可跳转到对应帮助文档,查看其详细用法) 2).h 文件和对应.cpp 文件切换:F4 3)编译并运行:Ctrl + R 4)函数声明和定义(函 ...
    
			
    8. 
						
  8. sqlserver 排序
			
    sqlserver中有几种排序的方式 1.order by asc||desc  [默认值升序(asc).降序:desc] 列:select * from tb order by id 2.ROW_N ...
    
			
    9. 
						
  9. 2013.5.3 - KDD第十五天
			
    今天上午把昨天的想法给中秋发过去了,然后我就开始科普随机森林: 随机森林是一种比较新的机器学习模型.经典的机器学习模型是神经网络,有半个多世纪的历史了.神经网络预测精确,但是计算量很大.上世纪八十年代 ...
    
			
    10. 
						
  10. mysql启动错误：Starting MySQL.. ERROR! The server quit without updating PID file错误
			
    1.原因是因为 mysql-bin.0000*的文件占满系统盘,磁盘空间不足导致无法写入. 解决方法: 如果不需要二进制日志文件,二进制文件可以实现数据库复制以及即时点恢复. 查看日志在配置文件的da ...
    
			
    11.