本节学习目标：

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

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

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. 04发送请求,将值赋给data--动态传递参数

    03==>发送青丘,将值赋给data. 注意:赋值使用的是 _this.setData({ }) 是以冒号的形式赋值, 提前保存好this data: { arrlistdata:[], }, ...

  2. pytest文档29-allure-pytest(最新最全，保证能搞成功！)

    前言 之前写了个pytest的allure相关的教程,只是停留在环境搭建完成,后续一直没用,小编一直不喜欢这种花里胡哨的报告. 没办法,领导就喜欢这种,小伙伴们也喜欢,所以还是得把allure用起来, ...

  3. github配置密钥

    我们在githob创建项目后,本地使用git 克隆代码 需要在githob配置密钥,才可以 步骤: 下载git,进行安装,安装好后.点击桌面,右键,选择>>git  bash 在弹出的黑框 ...

  4. python-新建文件夹

    import tensorflow as tf import os categories = ['folder1', 'folder2'] for folderName in categories: ...

  5. 微信小程序 - 组件 | 自定义组件 | 组件事件传递页面

    组件 小程序允许我们使用自定义组件的方式来构建页面 类似Vue的小组件 自定义组件 类似于页面,一个自定义组件由 json, wxml, wxss, js 4个文件组成 1.创建 1.创建compon ...

  6. Springboot 项目中 xml文件读取yml 配置文件

    <bean id="yamlProperties" class="org.springframework.beans.factory.config.YamlProp ...

  7. react服务端渲染框架

    客户端渲染 加载一个空的html页面,然后请求一个打包的js文件,然后再客户端执行这个js文件 动态生成html内容然后插入到DOM元素上,在源代码查询中也只能看到空的html文档 没有任何其他内容 ...

  8. ASP.NET开发实战——（四）ASP.NET MVC是如何运行的？它的生命周期是什么？

    前面的文章我们使用ASP.NET MVC创建了个博客应用,那么它是如何工作的呢?我们都知道ASP.NET的程序需要部署到IIS上才能够通过浏览器来访问,那么IIS与ASP.NET MVC程序之间又是如 ...

  9. [LeetCode] 464. Can I Win 我能赢吗

    In the "100 game," two players take turns adding, to a running total, any integer from 1.. ...

  10. git强制合并另一个分支

    New分支和Old分支都修改了同样的部分,有冲突,但是想在Old分之上合并New分支的内容,并且以New分支为主,就是不自己手动解决冲突,碰到冲突,直接以New分支为主. 参考 https://git ...