本节学习目标：

图片、表单和旁边的文字对齐

解决图片底部默认空白缝隙问题

1.图片、表单和旁边的文字对齐

默认的图片、表单等行内元素或行内快元素是和文字的基线对齐的，但在实际情况下，我们想让他们中间对齐或底部对齐，这时我们可以设置vertical-align属性

vertical: top|middle|base|bottom

2.解决图片底部默认空白缝隙问题

因为我们的图片默认是和文字的基线对齐的，如若我们给图片加边框，那么图片底部和边框中间会默认留一部分空隙。

解决办法：

  • 设置vertical属性（只要不是base就可以）
  • 把图片转化为块级元素

7.vertical-align属性的更多相关文章

  1. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  2. HTML 标签元素的 align 属性

    align 属性规定段落中文本的对齐方式. 有 left  right center  justify 这些参数 left  right center  就是左对齐 右对齐 中间对齐 justify  ...

  3. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  4. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  5. 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  6. img 的 align 属性

    AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐. AbsMiddle 图像的中间与同一行中最大元素的中间对齐. Baseline 图像的下边缘与第一行文本的下边缘对齐. Bottom ...

  7. delphi Align属性

    ---------------------------------------------- -

  8. 【HTML&CSS】 第二章：标准模式下的页面与怪异模式下的页面区别

    盒模型 前面提到,盒模型(box mode)是浏览器 Quirks Mode 和 Standards Mode 的主要区别. 描述 对于“盒模型”一词并没有明确的文档定义,它是开发人员描述 CSS 中 ...

  9. CSS居中对齐终极指南

    本文首发于我的公众号:前端新世界 欢迎关注 本文将讨论可用于居中对齐元素的6种CSS技术(按照最佳实践排序),以及每一种技术最适合应用的场景.这里,居中对齐指的是将元素放置在其父元素的水平和垂直中心. ...

  10. HTML中的align和valign这两个属性

    转自:https://www.douban.com/note/325833958/ align和valign属性均是规定表格相对于周围元素的对齐方式,区别就在于: 1.align属性趋向于左右对齐,其 ...

随机推荐

  1. Ansible 相关介绍

    相关视频http://v.xue.taobao.com/learn.htm?spm=a220o.1000855.0.0.24c748e6QMQV0e&courseId=111848 Ansib ...

  2. 使用mytop监控mysql

    mytop 是一个不错的实时查看mysql 状态的命令行工具,使用简单 安装 yum install -y mytop 环境准备 docker-compose 创建服务 version: " ...

  3. Python数据分析与爬虫

    数据分析重要步骤: 1.数据获取  可以进行人工收集获取部分重要数据 可以在各个数据库中导出数据 使用Python的爬虫等技术 2.数据整理  从数据库.文件中提取数据,生成DataFrame对象 采 ...

  4. 教你查阅Java API 英文文档（JDK 11）

    JAVA Document:https://docs.oracle.com/en/java/javase/11/ 然后找到“Specifications”并点击 API Documentation 比 ...

  5. 第04组 Alpha冲刺（3/6）

    队名:new game 组长博客:戳 作业博客:戳 组员情况 鲍子涵(队长) 燃尽图 过去两天完成了哪些任务 才两天,也就是实现一些功能而已 复习 接下来的计划 实现更多的功能 为下周的比赛准备 还剩 ...

  6. JS基础——常见的数据类型

    常见的数据类型 原始类型(基本类型)包括 :number.string.boolean.null.undefind 引用类型包括 :object,其中object中又分 Function.Array. ...

  7. java十题

    这是我收集的10个最棘手的Java面试问题列表.这些问题主要来自 Java 核心部分 ,不涉及 Java EE 相关问题.你可能知道这些棘手的 Java 问题的答案,或者觉得这些不足以挑战你的 Jav ...

  8. 第五次实验报告：使用Packet Tracer理解OSPF路由协议

    目录 1 实验目的 2 实验内容 3. 实验报告 3.1 建立网络拓扑结构 4. 配置 4.1 配置并激活串行地址和以太网地址 4.1.1 R1 4.1.2 R2 4.1.3 R3 4.1.4 PC ...

  9. Qt Quick 常用元素：TabView(选项卡) 与 Slider(滑块)

    一.TabView TabView 可以实现类似 Windows 任务管理器的界面,有人叫 TabView 为标签控件,有人又称之为选项卡控件,我们知道它就是这么个东西就行了.现在来介绍 TabVie ...

  10. 用友U8合同执行单保存报错，提示“语法错误或违反访问规则”

    问题描述 用户参照合同录入第一阶段的执行单,保存时提示“语法错误或违反访问规则”,其他合同均正常,只有这张合同出现这个问题. 解决过程 语法错误或违反访问规则是SQL Server常见的报错,但其他合 ...