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

CSS图片垂直居中问题解决方案

news 来源：原创 2025/6/26 8:48:06

在 CSS 中，使用 vertical-align: middle 导致图片略微向下偏移的现象，本质上是由于 行内元素的基线对齐规则 和 父容器上下文环境 共同作用的结果。以下是具体原因和解决方案：

原因详解

1. `vertical-align: middle` 的真实含义

该属性 不会让元素在父容器中垂直居中，而是让元素的中点对齐父元素的 基线（baseline） + x-height 的一半（x-height 是小写字母 x 的高度）。
如果父元素内有文本或其他行内元素，基线的位置会被这些元素影响，导致图片看似“下移”。

2. 图片的默认基线

图片作为 inline 或 inline-block 元素，其默认基线（baseline）是 图片的底部边缘。
当父元素中存在文本时，图片的基线会与文本的基线对齐，而文本的基线通常位于文字底部（如字母 “g” 或 “y” 的尾巴位置），导致图片被“抬高”。

3. 父元素的 `line-height` 影响

如果父元素未设置固定高度，而是由内容撑开，line-height 的值会直接影响行框（line box）的高度。
较大的 line-height 会导致行框高度增加，此时 vertical-align: middle 的对齐位置可能偏离视觉中心。

4. 空白节点干扰

如果父元素内有空格、换行符或其他不可见文本节点，这些空白符会占据行内空间，影响基线位置。

直观现象演示

<div class="container"><img src="image.jpg" alt="示例图片">这是一段文本
</div><style>
.container {height: 200px;border: 1px solid red;
}
img {vertical-align: middle;
}
</style>

现象：图片看起来略微向下偏移，与文本的基线对齐，而不是父容器的中心。
原因：图片的基线（底部）与文本的基线对齐，而 vertical-align: middle 将图片中点对齐到父元素基线上方半个 x-height 的位置。

解决方案

方法 1：消除文本干扰，修正基线

.container {line-height: 200px;   /* 等于父容器高度 */font-size: 0;         /* 消除空白符间隙 */
}
img {vertical-align: middle;display: inline-block;
}

关键点：
- 父容器设置 line-height 等于高度，强制行框高度与容器一致。
- font-size: 0 消除空白符占位。
- 图片设为 inline-block 确保基线对齐生效。

方法 2：使用 Flexbox 精准居中

.container {display: flex;align-items: center;   /* 垂直居中 */justify-content: center; /* 水平居中 */height: 200px;
}

优点：完全避免基线对齐问题，精准控制位置。

方法 3：绝对定位 + 位移

.container {position: relative;height: 200px;
}
img {position: absolute;top: 50%;transform: translateY(-50%);
}

优点：不依赖父容器的 line-height，图片高度自适应。

调试技巧

可视化基线：在父容器中添加一个字母 “x”，观察其位置，理解基线对齐的参考点。
检查行框高度：通过开发者工具查看父元素的 line-height 和行框高度。
隔离干扰：暂时移除父容器内其他元素，观察图片是否仍偏移。

总结

vertical-align: middle 的“居中”是相对于行框的基线，而非视觉中心。
精准垂直居中应优先使用 Flexbox/Grid，避免传统对齐方式的“玄学”问题。
若坚持用 vertical-align，需严格控制父容器的 line-height 和消除文本干扰。

CSS图片垂直居中问题解决方案

在 CSS 中，使用 vertical-align: middle 导致图片略微向下偏移的现象，本质上是由于行内元素的基线对齐规则和父容器上下文环境共同作用的结果。以下是具体原因和解决方案： 原因详解 1. vertical-align: middle 的真实含义该属性不会让…...

编程日记 2025/6/26 8:48:06

P1601 A+B Problem（高精）

题目描述高精度加法，相当于 ab problem，不用考虑负数。输入格式分两行输入。a,b≤10500。输出格式输出只有一行，代表 ab 的值。输入输出样例输入 1 1 输出 2 输入 1001 9099 输出 10100 说明/提示 20% 的测试数据…...

编程日记 2025/6/26 7:09:40

鸿蒙OSUniApp实现个性化的搜索框与搜索历史记录#三方框架 #Uniapp

使用UniApp实现个性化的搜索框与搜索历史记录在移动端应用开发中，搜索功能几乎是标配，而一个好的搜索体验不仅仅是功能的实现，更是用户留存的关键。本文将分享如何在UniApp框架下打造一个既美观又实用的搜索框，并实现搜索历史记录…...

编程日记 2025/6/26 8:28:42

鸿蒙OSUniApp 制作自定义弹窗与模态框组件#三方框架 #Uniapp

UniApp 制作自定义弹窗与模态框组件前言在移动应用开发中，弹窗和模态框是用户交互的重要组成部分，它们用于显示提示信息、收集用户输入或确认用户操作。尽管 UniApp 提供了基础的交互组件如 uni.showModal() 和 uni.showToast()，但这些原…...

编程日记 2025/6/24 19:28:15

web第一次课后作业--运行一个java web项目

一、创建java web项目 1.新建java EE --> 模版：Web应用程序 2.选择版本：Java EE 8 3. 配置tomcat 二、页面效果默认页面跳转页面三、代码 3.1 默认页面 <% page contentType"text/html; charsetUTF-8" pageEncoding"UTF-8…...

编程日记 2025/6/26 6:48:48

工业互联网

工业互联网全景解析工业互联网是工业数字化、网络化、智能化转型升级的重要抓手，是实现中国制造 2025 战略目标的重要路径，对于推动我国实体经济高质量、可持续发展，建设制造强国、网络强国，意义重大。2017 年，我国提…...

编程日记 2025/6/26 7:12:19

论QT6多线程技术

前言以前我多线程使用传统的继承qthread重写run()或者继承qrunable类把对象丢到线程池解决。经过昨天的面试让我了解到新的技术，我之前看到过只不过没有详细的去了解movetotread技术，这个技术是qt5推出的，qt6还在延续使用代码结构以下是…...

编程日记 2025/6/26 7:39:32

TensorFlow深度学习实战（16）——注意力机制详解

TensorFlow深度学习实战（16）——注意力机制详解 0. 前言1. 引入注意力机制2. 注意力机制2.1 注意力机制原理2.2 注意力机制分类 3. 添加注意机制的 Seq2Seq 模型3.1 数据处理3.2 模型构建与训练3.3 模型性能评估小结系列链接 0. 前言在传统的神经网络…...

编程日记 2025/6/26 6:50:51

架空防静电地板材质全解析：选对材质，守护精密空间的“安全卫士”

在现代科技驱动的社会中，无论是数据中心、实验室、手术室，还是高端电子厂房，静电都是精密设备的“隐形杀手”。而架空防静电地板作为这些场所的“安全卫士”，其材质选择直接决定了防静电性能、承重能力及使用寿命。今天&#xff0…...

编程日记 2025/6/26 8:37:21

Linux系统中部署java服务（docker）

1、不使用docker ✅ 1. 检查并安装 Java 环境检查 Java 是否已安装： java -version✅ 2. 上传 Java 项目 JAR 文件可以创建一个server文件夹，然后上传目录查看当前目录然后创建目录上传jar包 ✅ 3. 启动 Java 服务 java -jar hywl-server.jar…...

编程日记 2025/6/26 8:07:42

PyGame游戏开发（入门知识+组件拆分+历史存档/回放+人机策略）

前言： 本章实现游戏组件的复用解耦，以及使用配置文件替代原有硬编码形式，进而只需要改动配置文件即可实现整个游戏的难度和地图变化，同时增加历史记录功能，在配置文件开启后即可保存每一局的记录为json形式作为后续强化…...

编程日记 2025/6/23 13:03:01

【上位机——WPF】Window标签常用属性

常用属性常用属性程序退出常用属性都是写在Window标签中的 <Window x:Class"WpfDemo1.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"…...

编程日记 2025/6/26 6:55:10

K8S Gateway AB测试、蓝绿发布、金丝雀(灰度)发布

假设有如下三个节点的 K8S 集群： k8s31master 是控制节点 k8s31node1、k8s31node2 是工作节点容器运行时是 containerd 一、场景分析阅读本文，默认您已经安装了 K8S Gateway。关于 AB 测试、金丝雀发布，可以看这篇文章。二、实验准…...

编程日记 2025/6/26 6:52:01

人大金仓数据库与django结合

要在Django项目中连接人大金仓数据库（Kingbase），你需要使用一个适合的数据库适配器。人大金仓数据库是基于PostgreSQL的，因此你可以使用psycopg2库来与Django连接。但是，由于人大金仓数据库有其特定的功能和配置&#…...

编程日记 2025/6/26 8:01:19

RK3588 桌面系统配置WiFi和蓝牙配置

桌面右上角点击，打开选项，找到WiFi的选择网络或者WiFi设置在弹出的窗口中选择需要连接的WiFi，然后右下角选择连接，然后输入WiFi密码即可连接。 25.4. 命令行连接wifi路由器命令行配置wifi的方法有很多，下面介绍几种…...

编程日记 2025/6/26 8:34:32

TLV格式

‌TLV格式（Tag-Length-Value）是一种常用的数据序列化格式，主要用于数据包或消息的有效载荷编码。‌TLV格式将数据划分为三个主要部分：Tag（标签）、Length（长度）和Value（值…...

编程日记 2025/6/25 16:47:23

2024年9月电子学会等级考试五级第三题——整数分解

题目 3、整数分解正整数 N 的 K-P 分解是指将 N 写成 K 个正整数的 P 次方的和。本题就请你对任意给定的正整数 N、K、P，写出 N 的 K-P 分解。时间限制：8000 内存限制：262144 输入输入在一行给出 3 个正整数 N (≤ 400)、K (≤ N)、P (1 …...

编程日记 2025/6/26 7:13:56

软考系统架构设计师系列知识点之杂项集萃（60）

接前一篇文章：软考系统架构设计师系列知识点之杂项集萃（59） 第97题在面向对象设计中，（）可以实现界面控制、外部接口和环境隔离。（）作为完成用例业务的责任承担者，协调…...

编程日记 2025/6/26 8:03:04

使用Python开发经典俄罗斯方块游戏

使用Python开发经典俄罗斯方块游戏在这篇教程中，我们将学习如何使用Python和Pygame库开发一个经典的俄罗斯方块游戏。这个项目将帮助你理解游戏开发的基本概念，包括图形界面、用户输入处理、碰撞检测等重要内容。项目概述我们将实现以下功能&…...

编程日记 2025/6/26 6:44:24

#include<iostream> #include<cstring> int main(int argc, char const *argv[]) {// 字符数组char str[128] "hello world";std::cout<<sizeof(str)<<std::endl;std::cout<<strlen(str)<<std::endl;// 字符串指针变量char *st…...

编程日记 2025/6/26 7:33:25

stm32使用freertos时延时时间间隔不对，可能是晶振频率没设置

freertos 获取频率的接口在 FreeRTOSConfig.h 文件中声明一个函数作为freertos的接口 /// /// brief 获取 SysTick 的频率 /// /// note arm cortex-m 系列 CPU 有一个 systick ，里面有一个 CTRL 寄存器，其中的 bit2 /// 可以用来控制 systick 的时钟…...

编程日记 2025/6/25 11:43:46

51c~C语言~合集5

我自己的原文哦~ https://blog.51cto.com/whaosoft/13913911 一、大厂C语言编程10大规范 1 代码总体原则 1、清晰第一清晰性是易于维护、易于重构的程序必需具备的特征。代码首先是给人读的，好的代码应当可以像文章一样发声朗诵出来。目前软件维护期成本…...

编程日记 2025/6/22 2:23:28

前端流行框架Vue3教程：17. _组件数据传递

_组件数据传递我们之前讲解过了组件之间的数据传递，props 和自定义事件两种方式 props：父传子自定义事件：子传父除了上述的方案，props也可以实现子传父一、项目结构 src/ └── components/├── ComponentsA.vue # 父…...

编程日记 2025/6/26 7:01:11

Stack overflow

本文来源 ：腾讯元宝 Stack Overflow - Where Developers Learn, Share, & Build Careers 开发者学习，分享通过学习、工作和经验积累等方式，逐步建立和发展自己的职业生涯。 Find answers to your technical questions and help othe…...

编程日记 2025/6/26 7:31:38

SpringBoot 3.4.5版本导入Lomobok依赖后无法生效的问题

问题背景最近，随着DeepSeek的爆火，小编也编写了一个前后端分离的“知库随考”系统，由于Spring AI官方提示想要使用Spring AI的话要求Spring Boot的版本在“3.4.x”以上，所以我在创建SpringBoot项目的时候选择了了Server URL:http…...

编程日记 2025/6/26 8:40:50

FPGA: UltraScale+ bitslip实现（ISERDESE3）

收获一晃五年~ 五年前那个夏夜，我对着泛蓝的屏幕敲下《给十年后的自己》，在2020年的疫情迷雾中编织着对未来的想象。此刻回望，第四届集创赛的参赛编号仍清晰如昨，而那个在家熬夜焊电路板的"不眠者"，现在…...

编程日记 2025/6/26 7:09:40

Electron详解：原理与不足

Electron是一个集成项目，它通过定制Chromium和Node.js，并将它们集成在内部来实现其功能。具体来说，Electron做了以下几个重要的工作： 定制Chromium：并将定制版本的Chromium集成在Electron内部。定制Node.js&#xff1…...

编程日记 2025/6/26 8:04:48

Spring Boot多数据源配置的陷阱与终极解决方案

引言在微服务架构和复杂业务场景中，一个Spring Boot应用连接多个数据库的需求日益普遍。许多开发者尝试通过简单复制单数据源配置来实现多数据源，结果却遭遇了Bean冲突、事务失效、连接泄漏等隐蔽问题。本文将深入剖析Spring Boot自动配置的底层逻辑&a…...

编程日记 2025/6/25 15:30:53

android display 笔记（十四）VAU 和GSP 分别代表什么

VAU 和 GSP 的解释 GSP (Graphics/GPU Subsystem Processor) 含义： 图形处理子系统，通常指 SoC（系统级芯片）中负责 2D/3D 图形渲染、显示合成、图像后处理（如缩放、旋转、色彩管理） 的硬件模块。在部分芯…...

编程日记 2025/6/26 7:40:51

tomcat 400 The valid characters are defined in RFC 7230 and RFC 3986

在遇到 Tomcat 因 URL 非法字符返回 400 Bad Request 时，选择在 Nginx 还是 Tomcat 中配置错误处理，需根据实际场景和需求权衡。以下是两种方案的详细对比及配置方法：一、选择建议方案适用场景优点缺点Nginx 配置- 需要统一处理所有后端服务（如多个 Tomcat 实例）的 400 …...

编程日记 2025/6/21 18:45:57

nginx负载均衡及keepalive高可用

实验前期准备： 5台虚拟机：4台当做服务器，1台当做客户机（当然，也可以使用主机的浏览器），4台服务器中，2台服务器当做后端真实访问服务器；另外2台服务器当做负载均衡服务器…...

编程日记 2025/6/26 3:11:54

漏洞修复：tomcat 升级版本 spring-boot-starter-tomcat 的依赖项

在Spring Boot项目中修复Tomcat漏洞（如CVE-2024-21733）时，通常需要升级内嵌Tomcat版本。以下是具体操作步骤和注意事项：一、确认当前Tomcat版本通过启动日志查看启动项目时，控制台日志中会显示类似 Starting Servlet engine: [Apache Tomcat/9.0.43] 的信息，直接查看版…...

编程日记 2025/6/21 10:26:27

二、IGMP

目录 1. IGMPv1 1.1 IGMPv1 报⽂类型 1.2 IGMPv1 工作机制 1.3 成员加入 1.4 离组机制 2. IGMPv2 2.1 IGMPv2 报文 2.3 查询器选举 & 维护 2.4 成员加入 2.4 离组机制 3. IGMPv3 3.1 IGMPv3 vs. IGMPv2 3.2 IGMPv3 报文 3.3 IGMPv3 工作机制 4. IGMP Proxy …...

编程日记 2025/6/23 22:56:32

Redis--基础知识点--27--redis缓存分类树

在 Redis 中存储分类树，通常需要选择合适的数据结构来表现层级关系。以下是使用字符串（String） 和哈希（Hash） 两种常见方案的举例说明，结合电商分类场景（如电子产品 > 手机 > 智能手机…...

编程日记 2025/6/22 23:33:34

【2025最新】VSCode Cline插件配置教程：免费使用Claude 3.7提升编程效率

 2025年最新VSCode Cline插件安装配置教程，详解多种免费使用Claude 3.7的方法，集成DeepSeek-R1与5大实用功能，专业编程效率提升指南。 Cline是VSCode中功能最强大的AI编程助手插件之一，它能与Claude、OpenAI等多种大模型无缝集…...

编程日记 2025/6/22 17:00:24

SQL笔记一

SQL的分类 DDL（数据定义语言）：CREATE（创建） ALTER（修改） DROP（删除结构） RENAME（重命名） TRUNCATE（清空） DML&#xff0…...

编程日记 2025/6/21 15:37:40

高可靠低纹波国产4644电源芯片在工业设备的应用

摘要随着工业自动化和智能化的飞速发展，工业设备对于电源芯片的性能和可靠性提出了前所未有的严格要求。电源芯片作为工业设备的核心供电组件，其性能直接影响到整个设备的运行效率和稳定性。本文以国科安芯的ASP4644四通道降压稳压器为例，通…...

编程日记 2025/6/24 4:53:43

MyBatis 的分页插件 c

前言大型项目的数据体量很大，在前端界面展示时为保障展示效果，会要求接口快速返回，这时候后端会选择分页获取数据，只传递要查询的页码数据。这就避免了大多问题，达到快速返回的效果。常用的分页有2种： …...

编程日记 2025/6/23 11:29:20

网络安全-等级保护(等保) 2-5 GB/T 25070—2019《信息安全技术网络安全等级保护安全设计技术要求》-2019-05-10发布【现行】

################################################################################ GB/T 22239-2019 《信息安全技术网络安全等级保护基础要求》包含安全物理环境、安全通信网络、安全区域边界、安全计算环境、安全管理中心、安全管理制度、安全管理机构、安全管理人员、安…...

编程日记 2025/6/22 22:45:16

嵌软面试每日一阅----FreeRTOS

一. FreeRTOS 创建任务的方法及区别在 FreeRTOS 中，任务创建主要有两种方式：动态内存分配（xTaskCreate()）和静态内存分配（xTaskCreateStatic()）。以下是两者的核心区别及使用场景： 1. 动态创建…...

编程日记 2025/6/21 1:36:03

EasyExcel详解

文章目录一、easyExcel1.什么是easyExcel2.easyExcel示例demo3.easyExcel read的底层逻辑~~4.easyExcel write的底层逻辑~~ 二、FastExcel1.为什么更换为fastExcel2.fastExcel新功能一、easyExcel 1.什么是easyExcel 内容摘自官方：Java解析、生成Excel比较有名的…...

编程日记 2025/6/20 7:15:07

023-C语言预处理详解

C语言预处理详解文章目录 C语言预处理详解1. 预定义符号2. #define定义常量3. #define定义宏4. 带有副作用的宏参数5. 宏替换的规则6. 宏函数的对比7. #和##7.1 #运算符7.2 ##运算符 8. 命名约定9. #undef10. 命令行定义11. 条件编译12. 头文件包含12.1 头文件被包含方式12.1.…...

编程日记 2025/5/28 8:55:54

C#自定义控件-实现了一个支持平移、缩放、双击重置的图像显示控件

1. 控件概述这是一个继承自 Control 的自定义控件，主要用于图像的显示和交互操作，具有以下核心功能： 图像显示与缩放（支持鼠标滚轮缩放）图像平移（支持鼠标拖拽）视图重置（双击重置…...

编程日记 2025/6/21 5:13:17

MarkitDown：AI时代的文档转换利器

在当今AI快速发展的时代，如何高效地将各种格式的文档转换为机器可读的格式，成为了一个迫切需要解决的问题。今天，我们来介绍一款由微软开发的强大工具——MarkitDown，它正是为解决这一问题而生的。什么是MarkitDown？ MarkitDown是一个用Python编写的轻量级工具，专门用…...

编程日记 2025/6/23 18:01:19

《数字分身进化论：React Native与Flutter如何打造沉浸式虚拟形象编辑》

React Native，依托JavaScript语言，借助其成熟的React生态系统，开发者能够快速上手，将前端开发的经验巧妙运用到移动应用开发中。它通过JavaScript桥接机制调用原生组件，实现与iOS和Android系统的深度交互，这…...

编程日记 2025/6/23 1:44:44

DeerFlow：字节新一代 DeepSearch 框架

项目地址：https://github.com/bytedance/deer-flow/ 【全新的 Multi-Agent 架构设计】独家设计的 Research Team 机制，支持多轮对话、多轮决策和多轮任务执行。与 LangChain 原版 Supervisor 相比，显著减少 Tokens 消耗和 API 调用次数&#…...

编程日记 2025/6/22 17:15:40