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. 以太坊Geth通过私钥导入新地址到钱包步骤

    Open TextEdit Paste key into TextEdit without any extra characters or quotations Save the file as pk ...

  2. windows 10中的ubuntu子系统安装桌面环境的方法

    windows 10中的ubuntu子系统安装桌面环境的方法 (How to install Ubuntu-desktop in windows 10 Subsystem for Linux) 转载 ...

  3. SaaS领域如何分析收入增长?

    SaaS领域如何分析收入增长? 今天我们试着将其模式运用到收入增长上进行分析.这对常规收入的计算会极有帮助,例如企业级应用软件(SaaS)或消费者订阅业务. 列举某公司通过月度订阅获得营收为例,为了更 ...

  4. 自然语言处理(NLP)之个人小结

    一 概述 1.1 自然语言处理四大任务 序列标注 分词 词性标注 命名实体识别 分类任务 文本分类 情感分析 判断句子关系 问答系统 对话系统 阅读理解 生成任务 机器翻译 自动文摘 图像描述生成 1 ...

  5. Re-ranking Person Re-identification with k-reciprocal Encoding

    Re-ranking Person Re-identification with k-reciprocal Encoding Abstract In this paper, we propose a ...

  6. vue项目中兼容ie8以上浏览器的配置

    1.首先需要在根目录的index.html文件加入如下代码 <meta http-equiv="X-UA-Compatible" content="IE=edge& ...

  7. appium(api操作)

    driver.current_activity #获取当前activity driver.current_package #获取包名 driver.lock(seconds=2) #息屏 #收起虚拟键 ...

  8. nginx 转发tcp连接

    背景:公司有一套工作流服务(jira,confluence,bitbucket),目前jira,confluence配置的是从nginx网关进行转发,bitbucket配置的是直接解析到该主机,现在计 ...

  9. 斐波那契数列Fibonacci问题—动态规划

    斐波那契数列定义 Fibonacci array:1,1,2,3,5,8,13,21,34,... 在数学上,斐波那契数列是以递归的方法来定义: F(0) = 0 F(1) = 1 F(n) = F( ...

  10. leetCode算法——1TwoSum（两数之和）

    描述: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中 ...