黑马程序员前端-CSS之vertical-align 属性应用

于 2022-04-04 16:58:52 发布
阅读量398 收藏 2
点赞数
分类专栏： 2023年前端—入门到精通 文章标签： 前端 自学前端 前端自学 css CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itcast_cn/article/details/123955928
版权

按照HTML+CSS的学习顺序笔记已经更新了27篇内容了，因为篇幅问题，请看文末。

目录

一、使用场景

二、图片、表单和文字对齐

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

四、往期合集

今天来学vertical-align 属性应用.

一、使用场景

CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

css vertical-align : baseline | top | middle | bottom

​

二、图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

​

此时可以给图片、表单这些行内块元素的vertical-align 属性设置为 middle就可以让文字和图片垂直居中对齐了。

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

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1.给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）

2.把图片转换为块级元素 display: block;

​

四、往期合集
 

 2022年前端学习路线图：课程、源码、笔记，技术栈
欢迎小伙伴们留言哦，期待看到大家的进步。另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。
 

黑马程序员官方
关注
专栏目录
博客
自学前端需要达到什么水平才能去找工作？来看看这套前端学习路线图
11-26 2万+
自学前端需要达到什么水平？当然是水平越高，越容易找到工作。在竞争这么激烈的2020年，就需要更加的努力，充实自己，让自己不被代替！看了好多的回答，大家都是再说学到什么水平能找到工作，我就来分享干货吧！祝看到这篇干货的小伙伴，工作步步高升！黑马程序员学习路线图及能掌握的能力（总，以下会分阶段，加上配套学习视频，小伙伴可继续往下看！）第一阶段：HTML5+css配套学习视频：前端小白零基础入门HTML5+CSS3完整视频：http://yun.itheima.co.
博客
软件测试全套教程，2020年全新软件测试学习路线图
05-04 1万+
2020年全新的软件测试学习路线图来袭，零基础入行入职必备学习教程，高质量免费资源在线学习！还在等什么，想学习软件测试的小伙伴，快来点击进入学习状态吧！一、基础入门课程亮点1. 熟悉计算机相关概念。2. 掌握基础的测试理论。3. 熟练掌握HTML常用标签input。4. 掌握使用CSS选择器。配套学习视频：软件测试基础入门之HTML基础​软件测试基础入门......
博客
Java多线程编程，来看这篇就够了！全新Java多线程教程！
06-25 7046
对于Java程序员来讲，Spring全家桶几乎可以搞定一切，Spring全家桶便是精妙的招式，多线程就是内功心法很重要的一块，线上出现性能问题，多线程更是不可回避的问题。因此多线程基础知识对于高级程序员的重要性不必言语！很多公司在面试高级程序员时候，多线程相关知识也必定是考核的标准之一。那我们为什么要学习多线程呢？掌握Java多线程可以：应对面试、优化之路、深入理解。应对面试在面试中，求职...
博客
QT教程，QT从入门到实战教程完整版
06-17 7万+
Qt是一个跨平台开发框架，可以使用C++和Qml开发，同时它又不仅仅只是开发框架，它也是一种技术策略，可以让你快速、高效地设计、开发、部署和维护软件，同时在所有设备上提供无缝的用户体验。因而，对于C/C++工程师而言，QT是必须要学习的一个跨平台开发框架，今天分享一个QT教程！课程亮点1，知识体系完备，内容精炼2，脉络清晰，讲解过程把握知识主线。3，结合工作实践及分析应用，培养...
博客
软件测试人员应该如何介绍自己测试过的项目
05-09 4万+
测试人员在找工作的过程中，通常有一个问题是很难绕开的。就是要如何向别人介绍自己之前做过的项目。下面我们就这个问题简单的做一些分析。要解决这个问题，大体上可以分为如下几个步骤：1、对项目进行基本介绍2、说明自己负责测试的模块3、针对部分模块展开进行说明一. 对项目进行基本介绍以下就以一个简单的项目进行介绍说明：最近测试的Tpshop项目是一个B/S架构的Web项...
博客
软件测试全套教程，软件测试自学线路图
07-09 19万+
软件测试：软件测试是为了发现程序中的错误而执行程序的过程。通俗的说，软件测试需要在发布软件之前，尽可能的找软件的错误，尽量避免在发布之后给用户带来不好的体验，并要满足用户使用的需求。现在市面上这么多软件，每个软件背后都有软件测试工程师的功劳，这也造就了软件测试行业前景非常好，今天我就分享一下自学线路图，及全套教程！软件测试学习线路图点击查看大图第一阶段：该...
博客
Python入门教程完整版（懂中文就能学会）
09-28 18万+
今天本宝宝给大家带来了干货，Python入门教程完整版，完整版啊！完整版！言归正传，我来给大家介绍一下这套教程，希望每个小伙伴都沉迷学习，无法自拔！本套教程学习时间15天1-3天内容：为Linux基础命令4-13天内容：为Python基础教程14-15 天内容：为飞机大战项目演练第一阶段（1-3天）：该阶段首先通过介绍不同领域的三种操作系统，操作系统的发展简史以及...
博客
Java学习路线图，全套Java基础视频教程
09-07 24万+
深知广大爱好Java的人学习是多么困难，没视频没资源，上网花钱还老被骗。为此我呕心沥血整理了这套Java教程，不管你是不懂电脑的小白，还是已经步入开发的大牛，这套路线路你都值得拥有，小白看上面的视频可以成功学会Java并且顺利工作，大神看了上面的资源肯定会谆谆乐道，教程的宗旨就是分享，专业，便利，让喜爱Java的人，都能平等的学习。首先建立好开发环境非常重要，工欲善其事，必先利其器。做任何开发.........
博客
千字Java学习路径，超全！从零基础到精通~
07-01 675
Java并发编程实践》是并发编程的里程碑著作，从并发编程的基本理论入手，逐步介绍设计Java并发程序时的重要设计原则、设计模式及思维模式，使开发人员能够快速领悟Java并发编程要领，迅速构建大规模并发应用程序。这本书详细讲解了Java SE的所有内容及其原理，如果你能彻底掌握这本书，将会为你未来的技术进阶打下坚实的基础。《Java核心技术卷2：高级特征》全面覆盖了Java技术的高级主题，对Java技术的阐述精确到位，叙述方式深入浅出，并包含大量示例，帮助读者充分理解Java语言及其类库的相关特性。
博客
Java若依框架入门，初始化项目、Maven构建等配置
06-28 1443
这些版本的框架为开发者提供了多样化的选择，无论是传统的Web应用、现代化的前后端分离应用，还是复杂的微服务架构和跨平台的移动端应用，都能找到合适的若依框架版本来满足开发需求。
博客
Python学习指南：6个步骤快速上手
06-27 1114
Python 是一种高级解释型编程语言，由 Guido van Rossum 创建，首次发布于1991年。它注重代码的可读性，其语法允许程序员用比C++或Java更少的代码行来表达相同的概念。Python 支持多种编程范式，包括过程式编程、面向对象编程和函数式编程。简单来说，这意味着它非常灵活，可以用不同的方式编写代码，无论是为计算机设定一系列任务（过程式），创建事物或概念的数字模型（面向对象），还是像处理数学问题一样处理代码（函数式）。
博客
鸿蒙开发培训，5000家App已加入鸿蒙生态，华为鸿蒙设备增长至9亿
06-24 505
在2024年华为开发者大会上，华为终端BG CEO余承东宣布，目前鸿蒙生态设备已超过9亿，HarmonyOS开发者人数达到了254万，鸿蒙学堂的参与人次达到了435万。余承东指出，鸿蒙原生应用已进入全面冲刺阶段，并呼吁更多开发者加入鸿蒙生态。华为也承诺将持续提供完善的开发工具及资金扶持。鸿蒙生态的快速发展为开发者提供了广阔的前景和机遇。那么，如何投身鸿蒙技术，成为一名合格的鸿蒙开发者呢？以下是详细的学习路径，帮助你从基础到进阶，逐步掌握鸿蒙开发的核心技术。
博客
Python入门，Python爬虫基础知识
06-19 652
网络爬虫（Web Crawler 或 Spider）是一种在互联网上自动获取信息的程序。它根据设定的规则，从互联网上下载网页、图片、视频等内容，并提取有用信息进行处理。简而言之，网络爬虫就像是在互联网上自动“爬行”的程序，从一个或多个初始网页开始，读取网页内容，找到其中的链接，再通过这些链接找到下一个网页，如此循环，直到抓取完所有目标网页。网络爬虫的应用非常广泛，如搜索引擎的网页抓取、数据挖掘、网站监测等。例如，搜索引擎通过爬虫技术抓取网页信息，建立索引数据库，以便用户进行关键词搜索时能快速找到相关信息。
博客
Java入门，深入理解Java平台及其关键特性
06-19 565
Java的标志性特点是“一次编写，到处运行”（Write once, run anywhere）。通过字节码和Java虚拟机（JVM），Java可以在不同的操作系统和硬件上运行，这种跨平台的抽象屏蔽了底层的细节，使得Java程序具备了很强的可移植性。
博客
5分钟上手Python爬虫，轻松掌握爬虫技巧
06-17 1340
本文的重点在于引导读者初步掌握爬虫技术。入门并不难，但在实际操作中可能会遇到一些困难，比如有些网站不允许直接访问，需要登录或进行人机验证等。因此，建议先从爬取一些新闻资讯类的网站开始，因为这样相对容易。涉及用户支付等敏感信息的网站就不那么容易获取了。因此，在入门阶段，不要选择太复杂的网站，先尝试简单的爬取。一旦理解了基本原理，遇到问题时可以考虑添加组件或使用第三方库来解决。# 初始化彩色输出init()# 定义颜色# 打印初始信息。
博客
Java面试重点知识体系解析及高效复习指南
06-12 448
Java 后端的知识体系非常庞大，在准备面试时，需要优先抓住重点进行复习。
博客
鸿蒙开发培训，5分钟学会鸿蒙开发语言关键知识点
06-11 872
ArkTS 是 HarmonyOS 的主要开发语言。它在 TypeScript 的基础上进行了优化和扩展，保留了 TypeScript 的优点，同时屏蔽了其缺点，并与 ArkUI 框架一起构建了鸿蒙应用。本文将介绍 ArkTS 的相关内容。基于上述需求，ArkTS 强制使用静态类型。这意味着在 ArkTS 中，声明变量、函数参数和返回值时必须指定类型，并在编译时进行严格的类型检查。
博客
深入理解三大经典算法：快速排序、动态规划背包问题和Dijkstra算法
06-06 431
很多业务场景需要算法，成熟的算法可以提高效率，减少不必要出现的问题，规避风险！今天给大家总结了3个在实现业务场景中使用到的算法，分享给你。
博客
Java学习：Java中的常见数据结构以及其示例代码
06-05 344
这些示例代码展示了如何使用Java中的一些常见数据结构。你可以根据具体需求进行修改和扩展，以适应不同的应用场景。了解和熟练使用这些数据结构，将帮助你编写出更高效、可维护的代码。在Java编程中，了解和掌握常见的数据结构是至关重要的。
博客
掌握Java的80%：面向对象与并发编程
06-04 732
Java作为一种广泛使用的编程语言，其强大之处在于其面向对象的特性和对并发编程的卓越支持。作为一名程序员，深刻理解Java的面向对象概念、集合框架、多线程与并发编程，以及Java虚拟机（JVM）的基础知识，对于编写高效、可维护的代码至关重要。本文将引导你快速掌握这些核心概念。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值