<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. 《Docker Deep Dive》Note - Docker 引擎
			
    <Docker Deep Dive>Note Docker 引擎 1. 概览 graph TB A(Docker client) --- B(daemon) subgraph Docker ...
    
			
    2. 
						
  2. Java -- 基于JDK1.8的ThreadLocal源码分析
			
    1,最近在做一个需求的时候需要对外部暴露一个值得应用  ,一般来说直接写个单例,将这个成员变量的值暴露出去就ok了,但是当时突然灵机一动(现在回想是个多余的想法),想到handle源码里面有使用过Th ...
    
			
    3. 
						
  3. GOF 的23种JAVA常用设计模式总结 03 面向对象七大设计原则
			
    在软件开发中,为了提高软件系统的可维护性和可复用性,增加软件的可扩展性和灵活性,程序员要尽量根据 7 条原则来开发程序,从而提高软件开发效率.节约软件开发成本和维护成本. 各位代码界的大佬们总结出的七 ...
    
			
    4. 
						
  4. Synchronized 与Lock的不同之处
			
    Synchronized 与Lock的不同之处 用法不一样.synchronized既可以加在方法上,也可以加载特定的代码块上,括号中表示需要锁的对象.而Lock需要显示地指定起始位置和终止位置.sy ...
    
			
    5. 
						
  5. ABP 基于DDD的.NET开发框架 学习（六）创建新动态Api
			
    我们想要这个服务暴露成一个Web API控制器,以方便客户端调用.ASP.NET Boilerplate能够自动且动态地为这个应用服务创建Web API 控制器,只需要一行配置代码即可完成. Dyna ...
    
			
    6. 
						
  6. 面试总结 转发（CSDN 博主）
			
    1 https://blog.csdn.net/jackfrued/article/details/44921941 2 https://blog.csdn.net/jackfrued/article ...
    
			
    7. 
						
  7. mysql开启二进制日志
			
    打开xhell进入系统 进入mysql配置文件目录 执行 cd /etc/mysql 首先找到my.cnf这个配置文件,然后使用vim进入文件编辑 放开我标记的地方. 注意我标记的地方,其实这个就是在 ...
    
			
    8. 
						
  8. FireWolf OS X PE
			
    FireWolf OS X PE FireWolf OS X PE 9 使用手册   https://pe.firewolf.app/manual/ https://pe.firewolf.app/m ...
    
			
    9. 
						
  9. JavaScript 自己写一个 replaceAll() 函数
			
    JavaScript 的  replace()  方法可以在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 但是,只输入字符串的话,仅替换第一个字符,当然也可以用正则表达式来进行 ...
    
			
    10. 
						
  10. HTTP缓存字段总结
			
    首部 通用首部:有些首部提供了与报文相关的最基本的信息,它们被称为通用首部. 请求首部:请求首部是只在请求报文中有意义的首部. 响应首部 实体首部: 用来描述HTTP报文的负荷,由于请求和响应报文中都 ...
    
			
    11.