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

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

news 2025/8/24 1:21:49

单行文本垂直居中对齐

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

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

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

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

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

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

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

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

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

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

COCO物体检测评测方法简介

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

编程日记 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中，RPM Bundle 方式安装MySQL8。建议一定要用 RPM Bndle 版本安装，包全。官网下载：https://dev.mysql.com/downloads/mysql/1.卸载mariadb，会与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的知识要点

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

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

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

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

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

【算法】kmp

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

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

git 常用命令之 git checkout

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

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

一些常见错误

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

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

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

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

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

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

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

Linux系列备份与分享文档

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

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

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

文章目录1.前置环境搭建2.测试SNI生效条件(时间)3. 证书对SNI的影响3.1 双方使用同一个证书：3.2 双方使用不同的证书与私钥4. 端口号区分测试4.1 端口号区分，证书区分：4.2 端口号区分,证书不区分：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这篇论文，是关于多chiplet通信的，个人感觉核心贡献在于实现了 deadlock-freedom in multi-chiplet system，而不仅仅是考虑单个intra-chiplet的局部NoC可以通信，具体的一些…...

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

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

1、动态库、静态库介绍参考博客：《静态库和动态库介绍以及Makefile》； 2、代码目录结构和编译脚本参考博客：《实际工作开发中C语言工程的目录结构分析》； 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

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/8/22 3:26:26