<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. flink ETL数据处理
			
    Flink ETL 实现数据清洗   一:需求(针对算法产生的日志数据进行清洗拆分) 1. 算法产生的日志数据是嵌套json格式,需要拆分 2.针对算法中的国家字段进行大区转换 3.最后把不同类型的日 ...
    
			
    2. 
						
  2. 【LEETCODE】48、867. Transpose Matrix
			
    package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array *  ...
    
			
    3. 
						
  3. ORACLE存储过程，循环语法和游标
			
    1.定义所谓存储过程(Stored Procedure),就是一组用于完成特定数据库功能的SQL语句集,该SQL语句集经过编译后存储在数据库系统中.在使用时候,用户通过指定已经定义的存储过程名字并给出 ...
    
			
    4. 
						
  4. Ubuntu 18.04 LTS版本 GIMP安装
			
    为何安装? GIMP全称GNU Image Manipulation Program,是Linux下的一款图片处理软件,功能基本完备,用户体验不错. 如何安装? 命令:sudo apt install ...
    
			
    5. 
						
  5. spring boot 使用GraphQL
			
    在此之前需要简单了解GraphQL的基本知识,可通过以下来源进行学习 GraphQL官方中文网站 :https://graphql.cn GraphQL-java 官网:https://www.gra ...
    
			
    6. 
						
  6. 【阅读笔记：散列表】Javascript任何对象都是一个散列表（hash表）！
			
    什么是散列表? 散列表是Dictionary(字典)的一种散列表实现方式,字典传送门 一个很常见的应用是使用散列表来表示对象.Javascript语言内部就是使用散列表来表示每个对象.此时,对象的每个 ...
    
			
    7. 
						
  7. Linux下系统调用的组成与实现
			
    主要包括三个部分:(1)唯一的系统调用号(System Call Number):(2)系统调用表中相应的表项,即具体的函数地址:(3)对应的具体函数,即系统调用函数体. 以getpid()POSIX ...
    
			
    8. 
						
  8. 代替for-in 遍历对象
			
    object.keys() object.getOwnPropertyName()
    
			
    9. 
						
  9. php数组，常量，遍历等
			
    php常量,常量是不能被改变的,由英文字母,下划线,和数字组成,但是数字不能作为首字母出现. bool define ( string $name , mixed $value [, bool $ca ...
    
			
    10. 
						
  10. 用js刷剑指offer(第一个只出现一次的字符)
			
    题目描述 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分大小写). 牛客网链接 js代码 fu ...
    
			
    11.