多行文本在块元素中垂直居中
单行文本垂直居中对齐
在块元素中，让单行文本居中，可以使用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申明…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。 不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
23-Oracle 23 ai 区块链表（Blockchain Table）
小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
反射获取方法和属性
Java反射获取方法 在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...
AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而，传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案，能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
怎么让Comfyui导出的图像不包含工作流信息，
为了数据安全，让Comfyui导出的图像不包含工作流信息，导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo（推荐） 在 save_images 方法中，删除或注释掉所有与 metadata …...