多行文本在块元素中垂直居中
单行文本垂直居中对齐
在块元素中，让单行文本居中，可以使用line-height等于块元素的高，即可让该单行文本垂直居中对齐。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}p {line-height: 200px;background-color: #bfa;height: 200px;}</style>
</head>
<body><p>sdfasdfsdfasdf手动阀手动阀手动阀手动阀 </p>
</body>
</html>
多行文本垂直居中对齐
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 只需要设置display:table-cell，并且让vertical-align:middle即可，可随p元素的高度变化都保持多行文本居中（效果见下图） */p {display: table-cell;vertical-align: middle;background-color: #bfa;height: 200px;}</style>
</head>
<body><p>sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀</p>
</body>
</html>
应用示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="//at.alicdn.com/t/c/font_3766921_5avulu6dwfj.css"><style>* {margin: 0;padding: 0;}.box .box-item {/* 让多行文本垂直居中 */display: table-cell;vertical-align: middle;width: 150px;height: 150px;/* margin-right会无效 */margin-right: 10px;border: 1px solid red;text-align: center;background-color: #bfa;}</style>
</head>
<body><div class="box"><div class="box-item"><i class="iconfont icon-icon_player"></i><span>播放器</span></div><div class="box-item"><i class="iconfont icon-Music"></i><!-- 使用<br/>让它换行 --><br/><span>音乐</span></div><div class="box-item"><i class="iconfont icon-ic_wechat"></i><!-- 使用div块级元素换行 --><div>微信</div></div><div class="box-item"><i class="iconfont icon-search"></i><!-- 使用p块级元素换行 --><div>微信</div></div><div class="box-item"><!-- 行元素和块级元素穿插 --><i class="iconfont icon-icon_xinlang-chunselogo"></i><i class="iconfont icon-icon_xinlang-chunselogo"></i><p>微博</p><i class="iconfont icon-icon_xinlang-chunselogo"></i><p>微博</p><i class="iconfont icon-icon_xinlang-chunselogo"></i></div><div class="box-item"><img style="vertical-align:bottom;" src="./img/avatar_50x50.jpg" alt=""></div><div class="box-item"><img src="./img/avatar_50x50.jpg" alt=""><img src="./img/avatar_50x50.jpg" alt=""><img src="./img/avatar_50x50.jpg" alt=""></div><div class="box-item"><!-- 让底部对齐 --><img style="vertical-align:bottom;" src="./img/avatar_50x50.jpg" alt=""><img style="vertical-align:bottom;" src="./img/avatar_50x50.jpg" alt=""><img style="vertical-align:bottom;" src="./img/avatar_50x50.jpg" alt=""></div></div><!-- 常规方法让图片水平垂直居中对齐 --><div style="width:150px;height: 150px;position: relative;background-color: pink;border: 1px solid red;margin-top: 10px;"><div style="width:50px;height: 50px;left: 0;right: 0;bottom: 0;top: 0;position:absolute;margin: auto;"><img style="margin: auto;width: 100%;height: 100%;object-fit:cover;" src="./img/avatar.jpg" alt=""></div> </div></body>
</html>
相关文章：
多行文本在块元素中垂直居中
单行文本垂直居中对齐 在块元素中，让单行文本居中，可以使用line-height等于块元素的高，即可让该单行文本垂直居中对齐。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><me…...
在 WebAssembly 中使用 C/C++ 和 libbpf 编写 eBPF 程序
作者：于桐，郑昱笙 eBPF（extended Berkeley Packet Filter）是一种高性能的内核虚拟机，可以运行在内核空间中，用来收集系统和网络信息。随着计算机技术的不断发展，eBPF 的功能日益强大，…...
leveldb源码解析六——compact
compact分为manual_compaction、minor_compaction、major_compaction，统一由MaybeScheduleCompaction触发： void DBImpl::MaybeScheduleCompaction() {mutex_.AssertHeld();if (background_compaction_scheduled_) {// Already scheduled} else if (shu…...
数据结构（二）：单向链表、双向链表
数据结构（二）一、什么是链表1.数组的缺点2.链表的优点3.链表的缺点4.链表和数组的区别二、封装单向链表1. append方法：向尾部插入节点2. toString方法：链表元素转字符串3. insert方法：在任意位置插入数据4.get获取某个…...
COCO物体检测评测方法简介
本文从ap计算到map计算，最后到coco[0.5:0.95:0.05] map的计算，一步一步拆解物体检测指标map的计算方式。 一、ap计算方法 一个数据集有多个类别，对于该数据库有5个gt，算法检测出来10个bbox，对于人这个类别来说检测有…...
记一次上环境获取资源失败的案例
代码结构以及资源位置 测试代码 RestController RequestMapping("/json") public class JsonController {GetMapping("/user/1")public String queryUserInfo() throws Exception {// 如果使用全路径, 必须使用/开头String path JsonController.class.ge…...
实战超详细MySQL8离线安装
在RedHat中，RPM Bundle 方式安装MySQL8。建议一定要用 RPM Bndle 版本安装，包全。官网下载：https://dev.mysql.com/downloads/mysql/1.卸载mariadb，会与MySQL安装冲突。rpm -qa | grep mariadb 查看有无mariadb如果有࿰…...
依赖倒置原则|SOLID as a rock
文章目录 意图动机：违反依赖倒置原则解决方案：C++中依赖倒置原则的例子依赖倒置原则的优点1、可复用性2、可维护性在C++中用好DIP的标准总结本文是关于 SOLID as Rock 设计原则系列的五部分中的 最后一部分。 SOLID 设计原则侧重于开发 易于维护、可重用和可扩展的软件。 在…...
Webpack的知识要点
在前端开发中，一般情况下都使用 npm 和 webpack。 npm是一个非常流行的包管理工具，帮助开发者管理项目中使用的依赖库和工具。它可以方便地为项目安装第三方库，并在项目开发过程中进行版本控制。 webpack是一个模块打包工具ÿ…...
handler解析（2） -Handler源码解析
目录 基础了解： 相关概念解释 整体流程图： 源码解析 Looper 总结： sendMessage 总结： ThreadLocal 基础了解： Handler是一套 Android 消息传递机制,主要用于线程间通信。实际上handler其实就是主线程在起了一…...
【算法】kmp
KMP算法 名称由来 是由发明这个算法的三个科学家的名称首字母组成 作用 用于字符串的匹配问题 举例说明 字符串 aabaabaaf 模式串 aabaaf 传统匹配方法 第一步 aabaabaaf aabaaf 此时，b和f不一致，则把模式串从头和文本串的第二个字符开始比 第…...
git 常用命令之 git checkout
大家好，我是 17。 git checkout 是 git 中最重要最常用的命令之一，本文为大家详细解说一下。 恢复工作区 checkout 的用途之一是恢复工作区。 git checkout . checkout . 表示恢复工作区的所有更改,未跟踪的文件不会有变化。 恢复工作区的所有文件风…...
一些常见错误
500状态码: 代表服务器业务代码出错, 也就是执行controller里面的某个方法的过程中报错, 此时在IDEA的控制台中会显示具体的错误信息, 所以需要去看IDEA控制台的报错404状态码: 找不到资源找不到静态资源 检查请求地址是否拼写错误 检查静态资源的位置是否正确 如果以上都没有问…...
[单片机框架][调试功能] 回溯案发现场
程序莫名死机跑飞，不知道问题，那么下面教你回溯错误源 回溯案发现场一、修改HardFault_Handler1. xx.s 在启动文件，找到HardFault_Handler。并修改。2. 定义HardFault_Handler_C函数。（主要是打印信息并存储Flash）3. 根…...
MySQL主从同步-（二）搭建从机服务器
在docker中创建并启动MySQL从服务器：**端口3307docker run -d \-p 3307:3306 \-v /atguigu/mysql/slave1/conf:/etc/mysql/conf.d \-v /atguigu/mysql/slave1/data:/var/lib/mysql \-e MYSQL_ROOT_PASSWORD123456 \--name atguigu-mysql-slave1 \mysql:8.0.3创建MyS…...
Linux系列 备份与分享文档
作者简介：一名在校云计算网络运维学生、每天分享网络运维的学习经验、和学习笔记。 座右铭：低头赶路，敬事如仪 个人主页：网络豆的主页 目录 前言 一.备份与分享文档 1.使用压缩和解压缩工具 （1&…...
SNI生效条件 - 补充nginx-host绕过实例复现中SNI绕过的先决条件
文章目录1.前置环境搭建2.测试SNI生效条件(时间)3. 证书对SNI的影响3.1 双方使用同一个证书：3.2 双方使用不同的证书与私钥4. 端口号区分测试4.1 端口号区分，证书区分：4.2 端口号区分,证书不区分：5.总结SNI运行机制6. SNI机制绕过…...
傻白探索Chiplet，Modular Routing Design for Chiplet-based Systems（十一）
阅读了Modular Routing Design for Chiplet-based Systems这篇论文，是关于多chiplet通信的，个人感觉核心贡献在于实现了 deadlock-freedom in multi-chiplet system，而不仅仅是考虑单个intra-chiplet的局部NoC可以通信，具体的一些…...
C语言静态库、动态库的封装和注意事项
1、动态库、静态库介绍 参考博客：《静态库和动态库介绍以及Makefile》； 2、代码目录结构和编译脚本 参考博客：《实际工作开发中C语言工程的目录结构分析》； 3、编写库的流程 (1)明确需求:需求是否合理、需求的使用场景、需求可能遇…...
MyBatis-Plus分页插件和MyBatisX插件
MyBatis-Plus分页插件和MyBatisX插件六、插件1、分页插件a>添加配置类b>测试八、代码生成器1、引入依赖2、快速生成十、MyBatisX插件1、新建spring boot工程a>引入依赖b>配置application.ymlc>连接MySQL数据库d>MybatisX逆向生成2、MyBatisX快速生成CRUD申明…...
年前无情被裁，面试大厂的这几个月…
2月份了，金三银四也即将来临，在这个招聘季，大厂也开始招人，但还是有很多人吐槽说投了很多简历，却迟迟没有回复… 另一面企业招人真的变得容易了吗？有企业HR吐槽，简历确实比以前多了好几倍&…...
基于Java的分片上传功能
起因：最近在工作中接到了一个大文件上传下载的需求，要求将文件上传到share盘中，下载的时候根据前端传的不同条件对单个或多个文件进行打包并设置目录下载。 一开始我想着就还是用老办法直接file.transferTo(newFile)就算是大文件，…...
KDS安装步骤
KDS kinetis design studio 软件 第一步官网(https://www.nxp.com/ 注册账号下载set成功下载软件。 随着AI，大数据这些技术的快速发展，与此有关的知识也普及开来。如何在众多网站中寻找最有价值的信息，如何在最短的时间内获得最新的技…...
JavaSE-线程池（1）- 线程池概念
JavaSE-线程池（1）- 线程池概念 前提 使用多线程可以并发处理任务，提高程序执行效率。但同时创建和销毁线程会消耗操作系统资源，虽然java 使用线程的方式有多种，但是在实际使用过程中并不建议使用 new Thread 的方式手…...
开源代码的寿命为何只有1年？
说实话，如果古希腊的西西弗斯是一个在2016年编写开源代码的开发者，那他会有宾至如归的感觉。著名的西西弗斯处罚，是神话流传下来的，他被迫推一块巨大的石头上山，当登顶之后，只能眼睁睁看着它滚下去…...
完善登录功能--过滤器的使用
系列文章目录 Spring Boot读取配置文件内容的三种方式 Spring Boot自动配置–如何切换内置Web服务器 SpringBoot项目部署 上述为该系列部分文章，想了解更多可看我博客主页哦！ 文章目录系列文章目录前言一、创建自定义过滤器LoginCheckFilter二、在启动类…...
CSS基础：属性和关系选择器
字体属性 color 文本颜色 div{ color:red;} div{ color:#ff0000;} div{ color:rgb(255,0,0);} div{ color:rgba(255,0,0,.5);}font-size 文本大小 h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;}注意：chrome浏览器接受最小字体是12px font-we…...
设计模式：原型模式解决对象创建成本大问题
一、问题场景 现在有一只猫tom，姓名为: tom, 年龄为：1，颜色为：白色，请编写程序创建和tom猫属性完全相同的10只猫。 二、传统解决方案 public class Cat {private String name;private int age;private String color;…...
驱动开发（二）
一、驱动流程 驱动需要以下几个步骤才能完成对硬件的访问和操作： 模块加载函数 module_init注册主次设备号 <应用程序通过设备号找到设备>驱动设备文件 <应用程序访问驱动的方式> 1、手动创建 （mknod）2、程序自动创建file_oper…...
《狂飙》大结局，这22句经典台词值得细品
最近爆火的热播剧《狂飙》大家都看了吗？ 剧情紧凑、演技炸裂、豆瓣评分9.0，可以说是开年评分最高的一部国产剧。 虽然大结局了。 里面有很多经典台词，值得每个人细细品味。 01 这世界不缺梦想 有本事你就去实现它 02 你这么善良 怎么跟坏…...
效果好的网站建设公/网页制作公司排名
我配置samba主要提供给其他windows主机简单文件共享之用。碰到的问题是每次重新启动后，都需要在xwindows状态下重新进入samba管理界面设置一下才能提供共享。 经过研究，是smbd和nmbd这两个samba的守护进程没有随重启而启动的关系。于是在启动配置文件/et…...
广东手机网站建设哪家好/网站发帖推广平台
spring 的优点？ 1.降低了组件之间的耦合性 ，实现了软件各层之间的解耦 2.可以使用容易提供的众多服务，如事务管理，消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术，利用它很容易实现如权限拦截，运…...
成品网站建设价格/广州品牌营销策划公司排名
题目链接：http://acm.hdu.edu.cn/showproblem.php?pid1176 题目大意：小明每秒种只有在移动不超过一米的范围内接住坠落的馅饼。小径如图标上坐标： 在接下来的一段时间里，馅饼都掉落在0-10这11个位置。开始时小明站在5这个位置&am…...
现在没人做网站了/西安百度推广网站建设
python3,djago1.9,设置LANGUAGE_CODEzh_CN 不要添加中间件django.middleware.locale.LocaleMiddleware， 以下是django官方教程中的原话： 如果你只是想要用本地语言来运行Django,并且该语言的语言文件存在,只需要简单地设置 LANGUAGE_CODE 即可。如果要让…...
做网站架构图/seo收费标准多少
工具栏（ToolBar）是一种非常方便的控件，能大大增加用户操作的效率，但是基于对话框的程序，却不能像使用编辑框（Edit Box）和列表框(List Box)一样，方便地增加工具栏控件。本文将介绍一种…...
自学网站平面设计/外链论坛
反思： 1.priority_queue默认会优先输出大的元素，所以要注意重载运算符。 2.一定要记得resize 3.重载运算符标准方式 bool operator < (CNode b) const{return w > b.w;} #include <iostream> #include <queue> #include <cstd…...