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

CSS实现图片垂直居中方法

news 来源：原创 2025/8/6 23:20:14

html

    <div class="footer border-top-row"><div class="footer-row"><span class="footer-row-col01">制单人：{{ printData[pageIndex - 1].rkMaster.makerName}}<img :src="getPersonSignImgSrc(printData[pageIndex - 1].rkMaster.makerName!)" alt="" style="height: 28px"/></span><span class="footer-row-col02">审核人：{{ printData[pageIndex - 1].rkMaster.makerName}}<img :src="getPersonSignImgSrc(printData[pageIndex - 1].rkMaster.makerName!)" alt="" style="height: 28px"/></span></div><div class="footer-row pageNum"><span>第 {{ printData[pageIndex - 1].pageIndex }} 页 / 共 {{ printData[pageIndex - 1].pageCount }} 页</span></div></div>

可以通过以下CSS设置实现图片垂直居中：

css

复制

下载

.footer-row-col01,
.footer-row-col02 {display: inline-flex;  /* 启用flex布局 */align-items: center;   /* 垂直居中 */vertical-align: middle; /* 双重保障 */
}.footer-row-col01 img,
.footer-row-col02 img {vertical-align: middle; /* 图片自身垂直对齐 */margin-left: 4px;       /* 可选：添加与文字的间距 */
}

代码解释：

  1. 父容器设置（关键）

    • display: inline-flex：将span转换为行内flex容器，保持行内特性同时可以使用flex布局

    • align-items: center：通过flex布局实现垂直居中

    • vertical-align: middle：作为备用方案，防止flex布局未生效时的保障

  2. 图片设置

    • vertical-align: middle：修正行内元素的默认基线对齐问题

    • margin-left：可选，用于增加图片与前面文字的间距

补充说明：

  • 如果遇到间距问题，可以尝试在父容器添加 gap: 4px 属性

  • 确保父级元素有足够的高度，垂直居中效果才能明显

  • 如果使用Sass/Less等预处理器，建议将这些样式封装到对应的class中

最终效果：图片将与同行的文字在垂直方向上完美对齐，无论字号如何变化都能保持居中状态。

css

<style scoped lang="scss">.footer {// 子绝position: absolute;bottom: 0;&-row {display: flex;height: 30px;line-height: 30px;&-col01 {width: 480px;}&-col02 {width: 238px;}&-col01,&-col02 {display: flex; /* 启用flex布局 */align-items: center; /* 垂直居中 */vertical-align: middle; /* 双重保障 */gap: 10px; /* 横向间距 */}}</style>

效果

相关文章：

CSS实现图片垂直居中方法

html <div class"footer border-top-row"><div class"footer-row"><span class"footer-row-col01">制单人&#xff1a;{{ printData[pageIndex - 1].rkMaster.makerName}}<img :src"getPersonSignImgSrc(printData[pa…...

编程日记 2025/8/6 23:20:14

多账号管理与自动化中的浏览器指纹对抗方案

多账号管理与自动化中的浏览器指纹对抗方案 在日常的开发工作中&#xff0c;如果你曾涉及自动化脚本、多账号运营、数据抓取&#xff0c;或是在安全研究方向摸爬滚打过&#xff0c;应该对“浏览器指纹识别”这几个字不会陌生。 指纹识别&#xff1a;不是你以为的那种“指纹”…...

编程日记 2025/8/6 23:15:12

[6-1] TIM定时中断 江协科技学习笔记（45个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 TRGO是“Trigger Output”的缩写&#xff0c;中文意思是“触发输出”。在STM32微控制器中&#xff0c;TRGO是一个非常重要的功能&#xff0c;它允许定时器&#xff08;Timer&#xff09;在特定事件发生时输出一个触发信号。这个触发信号可以用…...

编程日记 2025/8/2 16:16:03

Flutter 3.29.3 花屏问题记录

文章目录 Flutter 3.29.3 花屏问题记录问题记录解决尝试解决 Flutter 3.29.3 花屏问题记录 问题记录 flutter版本3.29.3&#xff0c;代码大致为&#xff1a; ShaderMask(shaderCallback: (Rect bounds) {return LinearGradient(begin: Alignment.topCenter,end: Alignment.bo…...

编程日记 2025/8/6 23:18:26

[Windows] 希捷（Seagate）硬盘官方检测工具 - SeaTools（1.4.0.7）

[Windows] 希捷&#xff08;Seagate&#xff09;硬盘官方检测工具 - SeaTools 链接&#xff1a;https://pan.xunlei.com/s/VOPpN9A3Tn_rVktEMu6Lg9q9A1?pwdh8rz# 希望能修复好硬盘...

编程日记 2025/8/2 16:15:59

YOLOv8目标检测性能优化：损失函数改进的深度剖析

文章目录 YOLOv8 简介损失函数在 YOLOv8 中的关键作用SlideLoss 的原理与应用原理代码实例 FocalLoss 分类损失函数的优化原理代码实例 SlideLoss 与 FocalLoss 在 YOLOv8 中的协同作用实验结果与分析 YOLOv8 简介 YOLO&#xff08;You Only Look Once&#xff09;系列目标检测…...

编程日记 2025/8/2 16:15:57

docker 日志暴露方案 （带权限 还 免费 版本）

接到了一个需求&#xff0c;需求的内容是需要将测试环境的容器暴露给我们的 外包同事&#xff0c;但是又不能将所有的容器都暴露给他们。 一开始&#xff0c;我分别找了 Portainer log-pilot dpanel 它们都拥有非常良好的界面和容器情况可视化。 但&#xff0c;缺点是&am…...

编程日记 2025/8/6 23:15:12

水印云：AI赋能，让图像处理变得简单高效

水印云是一款基于超强AI技术的图像处理工具&#xff0c;提供丰富的图像编辑功能&#xff0c;将复杂的图像处理极简化&#xff0c;真正实现简单高效的图像处理。无论是去除水印、智能抠图、添加水印&#xff0c;还是提升画质&#xff0c;水印云都能轻松应对&#xff0c;满足不同…...

编程日记 2025/8/6 23:15:14

使用 ECharts GL 实现交互式 3D 饼图：技术解析与实践

一、效果概览 本文基于 Vue 3 和 ECharts GL&#xff0c;实现了一个具有以下特性的 3D 饼图&#xff1a; 立体视觉效果&#xff1a;通过参数方程构建 3D 扇形与底座动态交互&#xff1a;支持点击选中&#xff08;位移效果&#xff09;和悬停高亮&#xff08;放大效果&#xff…...

编程日记 2025/8/6 23:14:48

allure生成测试报告（搭配Pytest、allure-pytest）

文章目录 前言allure简介allure安装软件下载安装配置环境变量安装成功验证 allure运行流程allure装饰器函数基本说明装饰器函数使用allure.attach 命令行运行利用allure-pytest生成中间结果json 查看测试报告总览页面每个tab页的说明类别页面测试套图表页面时间刻度功能页面包 …...

编程日记 2025/8/6 23:18:26

一场陟遐自迩的 SwiftUI + CoreData 性能优化之旅（下）

概述 自从 SwiftUI 诞生那天起&#xff0c;我们秃头码农们就仿佛打开了一个全新的撸码世界&#xff0c;再辅以 CoreData 框架的鼎力相助&#xff0c;打造一款持久存储支持的 App 就像探囊取物般的 Easy。 话虽如此&#xff0c;不过 CoreData 虽好&#xff0c;稍不留神也可能会…...

编程日记 2025/8/6 23:14:47

java的输入输出模板(ACM模式)

文章目录 1、前置准备2、普通输入输出API①、输入API②、输出API 3、快速输入输出API①、BufferedReader②、BufferedWriter 案例题目描述代码 面试有时候要acm模式&#xff0c;刷惯leetcode可能会手生不会acm模式&#xff0c;该文直接通过几个题来熟悉java的输入输出模板&…...

编程日记 2025/8/2 16:15:45

浏览器自动化与网络爬虫实战：工具对比与选型指南

浏览器自动化与网络爬虫实战&#xff1a;工具对比与选型指南 摘要 在当今数字化时代&#xff0c;浏览器自动化和网络爬虫技术已成为数据收集与测试的重要工具。本文深入剖析了多种主流浏览器自动化工具和爬虫框架的特点、优缺点及其适用场景&#xff0c;包括 Selenium、Puppe…...

编程日记 2025/8/6 23:15:15

“双非” “退伍” “材料” “学验证” 拿到Dream Offer

大家好&#xff0c;我是2024年路科验证V2X春季班的学员。在春季班的课上完后&#xff0c;觉得自己的基础大部分已经被路科给弥补了&#xff0c;但是很多课程中关于框架的搭建和一些细节还是不够扎实&#xff0c;有所欠缺&#xff0c;于是又重修了秋季班的课程。这两次课程给我的…...

编程日记 2025/8/2 16:15:42

python 上海新闻爬虫， 上观新闻 + 腾讯新闻

1. 起因&#xff0c; 目的: 继续爬上海新闻&#xff0c; 增加新闻来源。昨天写了&#xff1a; 东方网 澎湃新闻今天增加2个来源&#xff1a; 上观新闻 腾讯新闻此时有4个来源&#xff0c;我觉得已经差不多了。 2. 先看效果 3. 过程: 代码 1, 上观新闻 这里也有一个有趣的…...

编程日记 2025/8/6 23:12:28

【LUT技术专题】ECLUT代码解读

目录 原文概要 1. 训练 2. 转表 3. 测试 本文是对ECLUT技术的代码解读&#xff0c;原文解读请看ECLUT。 原文概要 ECLUT通过EC模块增大网络感受野&#xff0c;提升超分效果&#xff0c;实现SRLUT的改进&#xff0c;主要是2个创新点&#xff1a; 提出了一个扩展卷积&…...

编程日记 2025/8/6 23:15:14

Wsl2 网络模式介绍

每个模式说明参考下面连接 使用 WSL 访问网络应用程序 | Microsoft Learn...

编程日记 2025/8/6 23:15:12

项目高压生存指南：科学重构身体与认知系统的抗压算法

引言&#xff1a;压力重构的工程学思维 在项目管理的高压熔炉中&#xff0c;优秀从业者与普通执行者的核心差异不在于抗压能力的高低&#xff0c;而在于是否掌握压力管理的系统化算法。本文摒弃传统的鸡汤式减压建议&#xff0c;从人体工程学、神经科学和认知心理学角度&#…...

编程日记 2025/8/6 23:12:29

Java设计模式之工厂方法模式：从入门到精通

1. 工厂方法模式概述 1.1 定义与核心思想 工厂方法模式(Factory Method Pattern) **定义：**是一种创建型设计模式，它定义了一个用于创建对象的接口，但让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。 **核心思想：**工厂模式的核心思想是将对象的创建…...

编程日记 2025/8/6 23:15:14

生成自定义的androidjar文件具体操作

在Androidsdk目录下的platform找到对应的api的android源码包路径&#xff0c;如android-32拷贝里面的android.jar文件到目录&#xff0c;如 C:\Users\xxxxxxx\Desktop\android\new_android_jar&#xff0c;然后解压android.jar到目录new_android_jar下。在编译后的aosp源码中找…...

编程日记 2025/8/6 23:12:29

在一台CentOS服务器上开启多个MySQL服务

1. 创建目录 mkdir -p /data/mysql3307/{data,tmp,logs} # 赋权 chown -R mysql:mysql /data/mysql3307 chmod -R 750 /data/mysql3307 2.修改 /etc/my.cnf &#xff0c;添加[mysqld3307]实例配置组 [mysqld3307] # MySQL服务的端口 port 3307 # 套接字文件存放路径 socket /…...

编程日记 2025/8/6 23:17:27

相机的方向和位置

如何更好的控制相机按照我们需要来更好的观察我们需要的地貌呢? 使用 // setview瞬间到达指定位置,视角//生成position是天安门的位置var position Cesium.Cartesian3.fromDegrees(116.397428,39.90923,100)viewer.camera.setView({//指定相机位置destination: position, 在…...

编程日记 2025/8/6 23:12:28

云原生架构下的微服务通信机制演进与实践

📝个人主页🌹：慌ZHANG-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言：通信机制是微服务架构的基础 随着软件系统复杂度的提升，“单体架构 → 微服务架构 → 云原生架构”逐步成为企业数字化转型的演进主线。而在微服务架构中，“服务间通信机制”决定了系统的稳定性…...

编程日记 2025/8/6 23:17:02

Git标签删除脚本解析与实践：轻松管理本地与远程标签

Git 标签删除脚本解析与实践：轻松管理本地与远程标签 在 Git 版本控制系统中，标签常用于标记重要的版本节点，方便追溯和管理项目的不同阶段。随着项目的推进，一些旧标签可能不再需要，此时就需要对它们进行清理。本文将通过一个完整的脚本，详细介绍如何删除本地和远程的 …...

编程日记 2025/8/6 23:17:00

5G让媒体传播更快更智能——技术赋能内容新时代

5G让媒体传播更快更智能——技术赋能内容新时代 在5G时代&#xff0c;媒体传播已经不再是传统的“电视纸媒网站”模式&#xff0c;而是演变成超低延迟、高速传输、智能交互的全新生态。无论是直播、短视频、VR/AR内容还是AI驱动的个性化推荐&#xff0c;5G的高速连接能力都在让…...

编程日记 2025/8/6 23:17:27

数字IC前端学习笔记：锁存器的综合

相关阅读 数字IC前端专栏https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 锁存器是一种时序逻辑&#xff0c;与寄存器相比面积更小&#xff0c;但它的存在会使静态时序分析(STA)变得更加复杂&#xff0c;因此懂得什么样的设计会综合出…...

编程日记 2025/8/6 23:20:14

Spring Boot快速开发：从零开始搭建一个企业级应用

Spring Boot快速开发&#xff1a;从零开始搭建一个企业级应用 在当今的软件开发领域&#xff0c;Spring Boot已经成为构建企业级应用的首选框架之一。它不仅简化了Spring应用的初始搭建以及开发过程&#xff0c;还提供了许多开箱即用的功能&#xff0c;使得开发者能够快速地构…...

编程日记 2025/8/2 16:15:20

ATH12K驱动框架架构图

ATH12K驱动框架架构图 ATH12K驱动框架架构图（分层描述）I. 顶层架构II. 核心数据结构层次关系III. 主要模块详解1. 核心模块 (Core)2. 硬件抽象层 (HAL)3. 无线管理接口 (WMI)4. 主机目标通信 (HTC)5. 复制引擎 (CE)6. MAC层7. 数据路径 (DP)IV. 关键数据流路径1. 发送数据流 …...

编程日记 2025/8/6 23:19:51

数字信号处理|| 离散序列的基本运算

一、实验目的 &#xff08;1&#xff09;进一步了解离散时间序列时域的基本运算。 &#xff08;2&#xff09;了解MATLAB语言进行离散序列运算的常用函数,掌握离散序列运算程序的编写方法。 二、实验涉及的MATLAB子函数 &#xff08;1&#xff09;find 功能:寻找非零元素的索…...

编程日记 2025/8/2 16:15:17

集成管理工具Gitlab

GitLab 是一个功能强大的开源代码托管和协作平台&#xff0c;集成 GitLab 可以显著提升团队的开发效率。下面我将为你介绍如何集成 GitLab&#xff0c;包括安装配置和基本使用流程。 一、GitLab 安装与配置 GitLab 有多种安装方式&#xff0c;推荐使用官方 Omnibus 包安装&am…...

编程日记 2025/8/6 23:18:26

2025 年数维杯数学建模 C 题完整论文代码模型：清明时节雨纷纷，何处踏青不误春

《2025 年数维杯数学建模 C 题完整论文代码模型》 C题完整论文 一、问题重述 1.1 问题背景 2025 年第十届数维杯大学生数学建模挑战赛 C 题&#xff0c;将我们带入“清明时节雨纷纷&#xff0c;何处踏青不误春”的诗意情境。清明节&#xff0c;这个处于每年 4 月 4 日至 6 …...

编程日记 2025/8/6 23:12:27

2025数维杯数学建模C题完整限量论文：清明时节雨纷纷，何处踏青不误春？

2025数维杯数学建模C题完整限量论文&#xff1a;清明时节雨纷纷&#xff0c;何处踏青不误春&#xff1f; 清明节&#xff0c;在每年 4 月 4 日至 6 日之间&#xff0c;既是自然节气&#xff0c;也是我国重要 的传统节日&#xff0c;承载着中华民族千年的文化记忆与情感寄托。此…...

编程日记 2025/8/6 23:17:26

POSE识别 神经网络

Pose 识别模型介绍 Pose 识别是计算机视觉领域的一个重要研究方向&#xff0c;其目标是从图像或视频中检测出人体的关键点位置&#xff0c;从而估计出人体的姿态。这项技术在许多领域都有广泛的应用&#xff0c;如动作捕捉、人机交互、体育分析、安防监控等。 Pose 识别模型的…...

编程日记 2025/8/2 15:08:41

Missashe高数强化学习笔记（随时更新）

Missashe高数强化学习笔记 说明&#xff1a;这篇笔记用于博主对高数强化课所学进行记录和总结。由于部分内容写在博主的日记博客里&#xff0c;所以博主会不定期将其重新copy到本篇笔记里。 第一章 函数极限连续 第二章 一元函数微分学 第三章 一元函数积分学 第一节 不定…...

编程日记 2025/8/2 15:08:39

如何从极狐GitLab 容器镜像库中删除容器镜像？

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 从容器镜像库中删除容器镜像 (BASIC ALL) 您可以从您的容器镜像库中删除容器镜像。 要基于特定标准自动删除容器镜像&#x…...

编程日记 2025/8/2 15:08:38

出现在‘{‘的段错误

今天在运行程序时&#xff0c;程序因段错误退出了&#xff0c;于是使用gdb调试。 部分输出如下: [New Thread 0x7fffc88be6c0 (LWP 47902)] [New Thread 0x7fffc80bd6c0 (LWP 47903)] [New Thread 0x7…...

编程日记 2025/8/2 15:08:36

【C++设计模式之Observer观察者模式】

Observer观察者模式 模式定义动机(Motivation)结构(Structure)应用场景一&#xff08;气象站&#xff09;实现步骤1.定义观察者接口2.定义被观察者(主题)接口3.实现具体被观察者对象(气象站)4.实现具体观察者(例如&#xff1a;显示屏)5.main.cpp中使用示例6.输出结果7. 关键点 …...

编程日记 2025/8/2 15:08:34

【软件测试】测试用例的概念与常见测试的模型

目录 一、测试用例的概念 1.1 什么是测试用例 1.2 编写测试用例的目的 1.3 用例设计的编写格式 二、模型 2.1 质量模型 2.2 测试模型 2.2.1 瀑布模型 2.2.2 螺旋模型 2.2.3 V 模型 2.2.4 W模型 2.2.5 增量、迭代模型 2.2.6 敏捷模型 2.2.6.1 敏捷宣言 2.2.6.2 Sc…...

编程日记 2025/8/2 15:08:33

OpenCV的 ccalib 模块用于自定义标定板的检测和处理类cv::ccalib::CustomPattern（）----函数calibrate

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::ccalib::CustomPattern 是OpenCV的 ccalib 模块中的一个类&#xff0c;主要用于自定义标定板的检测和处理。这个模块提供了比传统的 calib3d…...

编程日记 2025/8/2 15:08:31

高效管理钉钉收款单数据集成到MySQL的技术方案

钉钉数据集成到MySQL的技术案例分享&#xff1a;dd-收款单-->mysql&#xff08;鸿巢&#xff09;收款单&#xff08;其他收款&#xff09; 在企业日常运营中&#xff0c;数据的高效管理和实时处理至关重要。本文将聚焦于一个具体的系统对接集成案例&#xff1a;如何将钉钉平…...

编程日记 2025/8/2 15:08:29

介质访问控制（MAC）

介质访问控制&#xff08;MAC&#xff09;详解 介质访问控制&#xff08;Medium Access Control, MAC&#xff09;是数据链路层的核心子层&#xff0c;负责解决多个设备共享同一通信介质时的冲突问题。它的核心目标是&#xff1a;在广播或多路访问网络中&#xff0c;确保数据有…...

编程日记 2025/8/2 15:08:28

在Mac M1/M2上使用Hugging Face Transformers进行中文文本分类（完整指南）

在Mac M1/M2上使用Hugging Face Transformers进行中文文本分类&#xff08;完整指南&#xff09; 前言 随着Apple Silicon芯片&#xff08;M1/M2&#xff09;的普及&#xff0c;越来越多的开发者希望在Mac上运行深度学习任务。本文将详细介绍如何在Mac M1/M2设备上使用Huggin…...

编程日记 2025/8/4 10:08:22

企业如何将钉钉付款单高效集成到金蝶云星空？

钉钉数据集成到金蝶云星空&#xff1a;修改下推的付款单③ 在企业信息化系统中&#xff0c;数据的高效流转和准确对接是实现业务流程自动化的关键。本文将分享一个实际案例&#xff0c;展示如何通过轻易云数据集成平台&#xff0c;将钉钉中的付款单数据无缝集成到金蝶云星空系…...

编程日记 2025/8/4 10:08:20

软件确认报告：审查功能、评估标准及推动软件稳定高效运行

软件确认报告的主要任务是严格审查软件的各项功能&#xff0c;以此为基础&#xff0c;为精确评估其是否满足标准提供依据&#xff0c;并推动软件实现稳定与高效的运行。具体来说&#xff0c;报告将从目的、背景、所依据的资料、采用的测试手段以及最终的测试成效等几个方面进行…...

编程日记 2025/8/4 10:08:18

Github 热点项目 Cursor开源代替，AI代理+可视化编程！支持本地部署的隐私友好型开发神器。

Void编辑器今天必须拥有姓名&#xff01;作为总星数近1.5万的顶流开源工具&#xff0c;它用三大绝活圈粉无数&#xff1a;① 隐私党狂喜&#xff01;所有AI对话直连模型商&#xff0c;你的代码数据绝不留在别人服务器&#xff1b;② 自带时光机功能&#xff0c;AI修改代码时自动…...

编程日记 2025/8/4 10:08:16

影像超分——从低清到高清的跨越密码

在数字时代&#xff0c;影像超分技术宛如魔法般存在&#xff0c;它能让老旧模糊的照片焕发新生但目前面临着高计算量、稳定性不足&#xff0c;压缩与量化误差影响大&#xff0c;退化模型的估计难度高等痛点与挑战&#xff0c;本文将围绕影像超分的工作技术原理、应用场景等展开…...

编程日记 2025/8/4 10:08:14

Vue项目---懒加载的应用

懒加载 介绍原理展示详细解析模版部分脚本部分数据和变量IntersectionObserver加载更多数据生命周期钩子 代码Mock数据前端代码 介绍 懒加载&#xff08;Lazy Loading&#xff09;是一种常见的前端优化技术&#xff0c;用于延迟加载页面上的资源&#xff08;如图片、视频、组件…...

编程日记 2025/8/4 10:08:12

前端自学入门：HTML 基础详解与学习路线指引

在互联网的浪潮中&#xff0c;前端开发如同构建数字世界的基石&#xff0c;而 HTML 则是前端开发的 “入场券”。对于许多渴望踏入前端领域的初学者而言&#xff0c;HTML 入门是首要挑战。本指南将以清晰易懂的方式&#xff0c;带大家深入了解 HTML 基础&#xff0c;并梳理前端…...

编程日记 2025/8/4 10:08:10

机器学习 期末考试题

自测试卷1 一、选择题 1．下面关于数据分析说法正确的是（ ）。 A．数据分析是数学、统计学理论结合科学的统计分析方法 B．数据分析是一种数学分析方法 C．数据分析是统计学分析方法 D．数据分析是大数据分析方法 2．下面不是数据分析方法的是（ ）。 A．同比分析 B．环比分析…...

编程日记 2025/8/4 10:08:08

BP神经网络

一、BP 神经网络概述 BP&#xff08;Back Propagation&#xff09;神经网络是一种按照误差逆向传播算法训练的多层前馈神经网络&#xff0c;它是目前应用最广泛的神经网络模型之一。BP 神经网络由输入层、隐藏层和输出层组成&#xff0c;隐藏层可以有一层或多层。其学习过程由正…...

编程日记 2025/8/4 10:08:06