当前位置： 首页 > news >正文

多行文本在块元素中垂直居中

news 2026/2/9 17:03:51

单行文本垂直居中对齐

在块元素中，让单行文本居中，可以使用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>

相关文章：

多行文本在块元素中垂直居中

单行文本垂直居中对齐 在块元素中&#xff0c;让单行文本居中&#xff0c;可以使用line-height等于块元素的高&#xff0c;即可让该单行文本垂直居中对齐。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><me…...

编程日记 2023/2/12 15:45:52

在 WebAssembly 中使用 C/C++ 和 libbpf 编写 eBPF 程序

作者&#xff1a;于桐&#xff0c;郑昱笙 eBPF&#xff08;extended Berkeley Packet Filter&#xff09;是一种高性能的内核虚拟机&#xff0c;可以运行在内核空间中&#xff0c;用来收集系统和网络信息。随着计算机技术的不断发展&#xff0c;eBPF 的功能日益强大&#xff0c…...

编程日记 2023/2/12 15:44:44

leveldb源码解析六——compact

compact分为manual_compaction、minor_compaction、major_compaction&#xff0c;统一由MaybeScheduleCompaction触发&#xff1a; void DBImpl::MaybeScheduleCompaction() {mutex_.AssertHeld();if (background_compaction_scheduled_) {// Already scheduled} else if (shu…...

编程日记 2023/2/12 15:43:33

数据结构（二）：单向链表、双向链表

数据结构&#xff08;二&#xff09;一、什么是链表1.数组的缺点2.链表的优点3.链表的缺点4.链表和数组的区别二、封装单向链表1. append方法&#xff1a;向尾部插入节点2. toString方法&#xff1a;链表元素转字符串3. insert方法&#xff1a;在任意位置插入数据4.get获取某个…...

编程日记 2023/2/12 15:42:25

COCO物体检测评测方法简介

本文从ap计算到map计算&#xff0c;最后到coco[0.5:0.95:0.05] map的计算&#xff0c;一步一步拆解物体检测指标map的计算方式。 一、ap计算方法 一个数据集有多个类别&#xff0c;对于该数据库有5个gt&#xff0c;算法检测出来10个bbox&#xff0c;对于人这个类别来说检测有…...

编程日记 2023/2/12 15:40:11

记一次上环境获取资源失败的案例

代码结构以及资源位置 测试代码 RestController RequestMapping("/json") public class JsonController {GetMapping("/user/1")public String queryUserInfo() throws Exception {// 如果使用全路径, 必须使用/开头String path JsonController.class.ge…...

编程日记 2023/2/12 15:39:02

实战超详细MySQL8离线安装

在RedHat中&#xff0c;RPM Bundle 方式安装MySQL8。建议一定要用 RPM Bndle 版本安装&#xff0c;包全。官网下载&#xff1a;https://dev.mysql.com/downloads/mysql/1.卸载mariadb&#xff0c;会与MySQL安装冲突。rpm -qa | grep mariadb 查看有无mariadb如果有&#xff0…...

编程日记 2023/2/12 15:37:56

依赖倒置原则|SOLID as a rock

文章目录 意图动机：违反依赖倒置原则解决方案：C++中依赖倒置原则的例子依赖倒置原则的优点1、可复用性2、可维护性在C++中用好DIP的标准总结本文是关于 SOLID as Rock 设计原则系列的五部分中的 最后一部分。 SOLID 设计原则侧重于开发 易于维护、可重用和可扩展的软件。 在…...

编程日记 2023/2/12 15:36:47

Webpack的知识要点

在前端开发中&#xff0c;一般情况下都使用 npm 和 webpack。 　　npm是一个非常流行的包管理工具&#xff0c;帮助开发者管理项目中使用的依赖库和工具。它可以方便地为项目安装第三方库&#xff0c;并在项目开发过程中进行版本控制。 　　webpack是一个模块打包工具&#xff…...

编程日记 2023/2/12 15:35:39

handler解析（2） -Handler源码解析

目录 基础了解&#xff1a; 相关概念解释 整体流程图&#xff1a; 源码解析 Looper 总结&#xff1a; sendMessage 总结&#xff1a; ThreadLocal 基础了解&#xff1a; Handler是一套 Android 消息传递机制,主要用于线程间通信。实际上handler其实就是主线程在起了一…...

编程日记 2023/2/12 15:33:26

【算法】kmp

KMP算法 名称由来 是由发明这个算法的三个科学家的名称首字母组成 作用 用于字符串的匹配问题 举例说明 字符串 aabaabaaf 模式串 aabaaf 传统匹配方法 第一步 aabaabaaf aabaaf 此时&#xff0c;b和f不一致&#xff0c;则把模式串从头和文本串的第二个字符开始比 第…...

编程日记 2023/2/12 15:32:19

git 常用命令之 git checkout

大家好&#xff0c;我是 17。 git checkout 是 git 中最重要最常用的命令之一&#xff0c;本文为大家详细解说一下。 恢复工作区 checkout 的用途之一是恢复工作区。 git checkout . checkout . 表示恢复工作区的所有更改,未跟踪的文件不会有变化。 恢复工作区的所有文件风…...

编程日记 2023/2/12 15:31:13

一些常见错误

500状态码: 代表服务器业务代码出错, 也就是执行controller里面的某个方法的过程中报错, 此时在IDEA的控制台中会显示具体的错误信息, 所以需要去看IDEA控制台的报错404状态码: 找不到资源找不到静态资源 检查请求地址是否拼写错误 检查静态资源的位置是否正确 如果以上都没有问…...

编程日记 2023/2/12 15:30:07

[单片机框架][调试功能] 回溯案发现场

程序莫名死机跑飞&#xff0c;不知道问题&#xff0c;那么下面教你回溯错误源 回溯案发现场一、修改HardFault_Handler1. xx.s 在启动文件&#xff0c;找到HardFault_Handler。并修改。2. 定义HardFault_Handler_C函数。&#xff08;主要是打印信息并存储Flash&#xff09;3. 根…...

编程日记 2023/2/12 15:28:58

MySQL主从同步-（二）搭建从机服务器

在docker中创建并启动MySQL从服务器&#xff1a;**端口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…...

编程日记 2023/2/12 15:27:54

Linux系列 备份与分享文档

作者简介&#xff1a;一名在校云计算网络运维学生、每天分享网络运维的学习经验、和学习笔记。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 目录 前言 一.备份与分享文档 1.使用压缩和解压缩工具 &#xff08;1&…...

编程日记 2023/2/12 15:26:48

SNI生效条件 - 补充nginx-host绕过实例复现中SNI绕过的先决条件

文章目录1.前置环境搭建2.测试SNI生效条件(时间)3. 证书对SNI的影响3.1 双方使用同一个证书&#xff1a;3.2 双方使用不同的证书与私钥4. 端口号区分测试4.1 端口号区分&#xff0c;证书区分&#xff1a;4.2 端口号区分,证书不区分&#xff1a;5.总结SNI运行机制6. SNI机制绕过…...

编程日记 2023/2/12 15:25:40

傻白探索Chiplet，Modular Routing Design for Chiplet-based Systems（十一）

阅读了Modular Routing Design for Chiplet-based Systems这篇论文&#xff0c;是关于多chiplet通信的&#xff0c;个人感觉核心贡献在于实现了 deadlock-freedom in multi-chiplet system&#xff0c;而不仅仅是考虑单个intra-chiplet的局部NoC可以通信&#xff0c;具体的一些…...

编程日记 2023/2/12 15:24:28

C语言静态库、动态库的封装和注意事项

1、动态库、静态库介绍 参考博客&#xff1a;《静态库和动态库介绍以及Makefile》&#xff1b; 2、代码目录结构和编译脚本 参考博客&#xff1a;《实际工作开发中C语言工程的目录结构分析》&#xff1b; 3、编写库的流程 (1)明确需求:需求是否合理、需求的使用场景、需求可能遇…...

编程日记 2023/2/12 15:23:21

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申明…...

编程日记 2023/2/12 15:22:13

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/8 4:37:29

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2026/1/22 6:07:24

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/30 8:46:45

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2026/1/31 3:30:33

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/12/19 20:46:15

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2026/1/29 5:26:37

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2026/1/31 11:18:29

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2026/2/4 16:43:10