本节学习目标：

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

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

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. ZooKeeper架构原理你学会了吗？

    Zookeeper是分布式一致性问题的工业解决方案,是Apache Hadoop下解决分布式一致性的一个组件,后被分离出来成为Apache的顶级项目. 工程来源:是雅虎公司内部项目,据说雅虎内部很多项 ...

  2. Spring(005)-多环境Profile

    多个环境下的配置应该怎么进行,比如数据库连接字符,多个环境不同,spring的方案,大概总结如下. 例子,数据库配置. 定义一个获取数据库链接的接口 public interface DataConn ...

  3. Java8——Stream

    /* * 一.Stream API 的操作步骤: * * 1. 创建 Stream * * 2. 中间操作 * * 3. 终止操作(终端操作) */ public class TestStreamaA ...

  4. .NET开发中 springMVC+NHibernate注入失败的几个常见错误

    1.spring程序集没引用,这个一定要引用,还有就是如果有Redis,还需引用ServiceStack 2.webConfig没配置对,这个没对一般会报错 3.也许Global.asax文件没引入全 ...

  5. Apex API 请求

    Salesforce与网络服务的通信 在Salesforce中可以利用Apex类与远程站点的网络服务进行通信.当远程网络服务支持REST方法时,开发者可以利用Apex代码进行数据的操作. 设置远程站点 ...

  6. 爬虫之获取UA模块

    from fake_useragent import UserAgent ua = UserAgent(verify_ssl=False)res = ua.randomprint(res) 注: 实列 ...

  7. 复杂模拟 | 1095 模拟N个学生有K个志愿填M个学校

    妈的智障 #include <stdio.h> #include <memory.h> #include <math.h> #include <string& ...

  8. MySQL实战45讲学习笔记：第十二讲

    一.引子 平时的工作中,不知道你有没有遇到过这样的场景,一条 SQL 语句,正常执行的时候特别快,但是有时也不知道怎么回事,它就会变得特别慢,并且这样的场景很难复现,它不只随机,而且持续时间还很短. ...

  9. [LeetCode] 239. Sliding Window Maximum 滑动窗口最大值

    Given an array nums, there is a sliding window of size k which is moving from the very left of the a ...

  10. uni-app调用支付宝、微信支付

    项目中要用到支付功能,现在来看支付宝.微信应该是必选的两个方式了. uni-app 文档中要求:APP端 微信 和 支付宝的 orderInfo 必须是 字符串. 调用支付宝时,支付宝直接返回的 or ...