vertical-align 垂直对齐  （对于块级元素无效，主要用来控制表单或者图片与文字对齐的）

 图片和文字默认是基线对齐

属性： baseline 基线

  top  顶线

  middle 中线

  bottom 底线

 vertical-align 另一个作用 去除文字底侧空白缝隙

 有一个特性：图片或者表单等行内块元素，他的底线和父级盒子的基线对齐，装图片底层会有一个空白缝隙

 解决方法1：display: block;

 解决方法2： vertical-align: top

行内块和文字垂直对齐vertical-agign的更多相关文章

  1. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  2. 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式！

    块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...

  3. line-height系列（二）——对行内元素（文字、图片、兄弟元素）、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

  4. 疑问：line-height对非文字行内块的影响

    line-height:对子元素是非文字的行内块,表现出来的不是垂直居中.目前还不知道具体细节. 可以看出来两个东西不在一行.老师的解释是line-height对非文字元素解释不一样,但是我没懂细节. ...

  5. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  6. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  7. 【HTML】行内-块级-行块级

    行内元素 相邻元素可以在一行显示直到一行排不下才进行换行. 不可设置宽高,宽度随内容变化. padding和margin的设置中,水平方向(padding-left...)有效果,垂直方向无效果. 块 ...

  8. CSS(3)---块级标签、行内标签、行内块标签

    块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...

  9. HTML 行内-块级-行块级

    行内元素 相邻元素可以在一行显示直到一行排不下才进行换行. 不可设置宽高.对齐等属性,宽度随内容变化. padding和margin的设置中,水平方向(padding-left...)有效果,垂直方向 ...

随机推荐

  1. SQL-W3School-高级：SQL NULL 值

    ylbtech-SQL-W3School-高级:SQL NULL 值 1.返回顶部 1. NULL 值是遗漏的未知数据. 默认地,表的列可以存放 NULL 值. 本章讲解 IS NULL 和 IS N ...

  2. SQL-W3School-高级：SQL JOIN

    ylbtech-SQL-W3School-高级:SQL JOIN 1.返回顶部 1. SQL join 用于根据两个或多个表中的列之间的关系,从这些表中查询数据. Join 和 Key 有时为了得到完 ...

  3. cron表达式的用法 【比较全面靠谱】

    转: cron表达式的用法 cron表达式通过特定的规则指定时间,用于定时任务,本文简单记录它的部分语法和实例,并不完全,能覆盖日常大部分需求. 1. 整体结构 cron表达式是一个字符串,分为6或7 ...

  4. 10 Flutter仿京东商城项目 商品分类跳转到商品列表传值 商品列表页面布局

    pages下面新建: ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper ...

  5. idea使用Snyk对项目进行安全漏洞审核、修复

    笔者今天早上打开idea,看到右侧插件栏有一个大狗头,不懂什么时候好奇心驱使安装了这个插件.按图索骥,打开插件. 打开狗,里面会出现好多英文,其中有一处蓝色标底,here 字样的,你点击进去, 用Go ...

  6. idea控制台中文乱码“淇℃伅”

    方法一:找到tomcat的conf目录下的logging.properties,将输出到控制台的编码改为GBK java.util.logging.ConsoleHandler.encoding = ...

  7. php自定义错误处理函数

    function myErrorHandler($errno, $errstr, $errfile, $errline) { echo "<b>Custom error:< ...

  8. 使用apache commons net进行ftp传输

    apache commons net的maven地址: http://mvnrepository.com/artifact/commons-net/commons-net/3.6 <!-- ht ...

  9. OnPreInit,OnInit ,OnInitComplete ,OnPreLoad ,Page_Load等执行顺序

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  10. 解决报错Fatal error in launcher

    换电脑重装python,打算安装第三方库的时候出现错误: Fatal error in launcher 然而在网上搜到的大多数是解决 —— Fatal error in launcher: Unab ...