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

关于css中flex布局垂直居中失效问题的原因

news 2025/11/1 19:46:23

项目中遇到用flex进行页面布局后，使用上下居中设置：align-item: center;
目标效果如下：
在这里插入图片描述

但是失效，不起作用，如下图所示：
在这里插入图片描述
各种排查过后发现设置了子模块 align-self 属性，这会覆盖容器上的 align-items 设置，直接导致父元素的align-item: center;失效，无法垂直居中。

注：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

相关文章：

关于css中flex布局垂直居中失效问题的原因

项目中遇到用flex进行页面布局后，使用上下居中设置：align-item: center; 目标效果如下： 但是失效，不起作用，如下图所示： 各种排查过后发现设置了子模块 align-self 属性，这会覆盖容器上的 al…...

编程日记 2024/7/23 21:00:56

用Redisson写一个库存扣减的方法

使用Redisson来处理库存操作可以确保在高并发环境下库存数据的一致性和完整性。以下是使用Redisson实现库存管理的一些通用方法，包括获取库存、扣减库存、设置库存等。我们将使用Redisson的ReentrantLock来确保并发安全。 首先，确保你已经正确设置了Red…...

编程日记 2024/7/23 20:57:53

第2节课：文本内容与格式化——HTML中的文本处理技巧

目录 文本内容与格式化&#xff1a;段落和标题&#xff1a;构建文本基础段落 <p>标题 <h1> 到 <h6> 格式化&#xff1a;强调和样式加粗 <b>斜体 <i>下划线 <u> 列表&#xff1a;组织内容无序列表 <ul>有序列表 <ol>定义列表 &…...

编程日记 2024/7/23 20:55:52

temu平台电池/锂电池UN38.3资质合规解析

UN38.3资质合规解析 为满足相关法律法规和商品运输安全需求含锂电池商品需要提供对应的UN38.3资质。截至7月29日&#xff0c;相关类目下UN38.3资质待上传或上传失败的商品可能面临下架。 -01什么是UN38.3- 1&#xff09;UN38.3是指由联合国危险货物运输专家委员会编写的《试验…...

编程日记 2024/7/23 20:47:45

Huawei、Cisco 路由中 RIP 协议 summary 的用法

华为路由中 RIP summary summary用来使能 RIP 有类聚合&#xff0c;聚合后的路由以使用自然掩码的路由形式发布。undo summary用来取消有类聚合以便在子网之间进行路由&#xff0c;此时&#xff0c;子网的路由信息就会被发布出去。路由聚合降低了路由表中路由信息量。说明 有类…...

编程日记 2024/7/23 20:45:43

智能图像信息提取(飞桨OCR+ERNIE-Layout)

嘿&#xff0c;技术大佬们&#xff0c;今天我要分享的是一个超级棒的OCR技术方案&#xff0c;它结合了飞桨OCR和ERNIE-Layout&#xff0c;绝对是图像信息提取的利器&#xff01; 线上体验地址&#xff1a;智能图像信息提取(飞桨OCRERNIE-Layout) 它基于ERNIE -Layout和多版本Pa…...

编程日记 2024/7/23 20:44:42

Ubuntu 24.04 LTS Noble安装 FileZilla Server

FileZilla Server 是一款使用图形用户界面快速创建 FTP 服务器的软件。它有助于测试需要 FTP 服务器功能的各种项目。虽然早期的 FileZilla FTP 服务器仅适用于 Windows 和 macOS&#xff0c;但现在我们也可以在 Linux&#xff08;例如 Ubuntu 24.04&#xff09;上安装 FileZil…...

编程日记 2024/7/23 20:43:41

【关于使用swoole的知识点整理】

目录 &#xff08;1&#xff09;Swoole 如何理解&#xff0c;能解决你项目中的哪些痛点&#xff1f; &#xff08;2&#xff09;Swoole里的协程是什么&#xff0c;怎么用&#xff1f;为什么协程可以提高并发&#xff1f; &#xff08;3&#xff09;简述Swoole有哪些优点&…...

编程日记 2024/7/23 20:42:40

迁移学习：目标检测的加速器

迁移学习&#xff1a;目标检测的加速器 在深度学习领域&#xff0c;目标检测是一项至关重要的任务&#xff0c;广泛应用于从视频监控到自动驾驶等众多领域。然而&#xff0c;训练一个高性能的目标检测模型不仅需要大量的标注数据&#xff0c;还需要大量的计算资源和时间。迁移…...

编程日记 2024/7/23 20:41:39

gitee的怎么上传项目

前提 1.先下载Git Bash (如果没有下载的宝子们下载连接如下: 链接: link ) 项目上传到Gitee步骤 1.在Gitee上建立远程仓库 2.填写相关信息 3.进入本地你想要上传的文件目录下&#xff0c;右键单击空白处&#xff0c;点击Git Bash Here 4.配置你的用户名和邮箱 git con…...

编程日记 2024/7/23 20:40:39

【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记（二十三）

课程地址&#xff1a; 黑马程序员HarmonyOS4NEXT星河版入门到企业级实战教程&#xff0c;一套精通鸿蒙应用开发 &#xff08;本篇笔记对应课程第 33 节&#xff09; P33《32.通知-进度条通知》 下载按钮对应的逻辑&#xff1a; 取消按钮对应的逻辑&#xff1a; 暂停按钮对应的…...

编程日记 2024/7/23 20:37:35

.NET C# 配置 Options

.NET C# 配置 Options 使用 options 模式可以带来许多好处&#xff0c;包括清晰的配置管理、类型安全、易于测试和灵活性。但在使用过程中&#xff0c;也需要注意配置复杂性、性能开销和依赖框架等问题。通过合理设计和使用&#xff0c;可以充分发挥 options 模式的优势&#…...

编程日记 2024/7/23 20:36:33

42、PHP 实现把二叉树打印成多行

题目&#xff1a; PHP 实现把二叉树打印成多行 描述&#xff1a; 从上到下按层打印二叉树&#xff0c;同一层结点从左至右输出。每一层输出一行。 <?php/*class TreeNode{var $val;var $left NULL;var $right NULL;function __construct($val){$this->val $val;} }…...

编程日记 2024/7/23 20:34:31

verilog bug记录——正点原子spi_drive存在的问题

verilog bug记录——正点原子spi_drive存在的问题 问题概述代码修改—spi_drive.v遗留问题 问题概述 因为项目需求&#xff0c;需要利用spi对flash进行擦除和写入操作&#xff0c;所使用的开发板是正电原子的达芬奇开发板&#xff0c;我事先往Flash里面存了两个bit&#xff0c…...

编程日记 2024/7/23 20:32:29

vue+watermark-dom实现页面水印效果

前言 页面水印大家应该都不陌生&#xff0c;它可以用于验证数字媒体的来源和完整性&#xff0c;还可以用于版权保护和信息识别&#xff0c;这些信息可以在不影响媒体质量的情况下嵌入&#xff0c;‌并在需要时进行提取。‌本文将通过 vue 结合 watermark-dom 库&#xff0c;教大…...

编程日记 2024/7/23 20:31:28

为什么要学习网安技术？

学习网络安全&#xff08;网安&#xff09;技术在当今社会变得尤为重要&#xff0c;这主要源于以下几个方面的原因&#xff1a; 保护个人隐私&#xff1a;随着互联网的普及&#xff0c;个人信息如姓名、地址、电话号码、甚至银行账户信息等都在网络上留下了痕迹。学习网安技术可…...

编程日记 2024/7/23 20:30:27

2024春秋杯网络安全联赛夏季赛Crypto(AK)解题思路及用到的软件

2024春秋杯网络安全联赛夏季赛Crypto(AK) 2024春秋杯网络安全联赛夏季赛Crypto解题思路以及用到的软件 所有题用到的软件 1.vm(虚拟机kali)和Ubuntu&#xff0c;正常配置即可B站有很多。 2.Visual Studio Code(里面要配置python&#xff0c;crypto库和Sagemath数学软件系统S…...

编程日记 2024/7/23 20:28:25

vue2 使用代码编辑器插件 vue-codemirror

vue 使用代码编辑器插件 vue-codemirror 之前用过一次&#xff0c;当时用的一知半解的&#xff0c;所以也没有成文&#xff0c;前几天又因为项目有需求&#xff0c;所以说有用了一次&#xff0c;当然&#xff0c;依旧是一知半解&#xff0c;但是还是稍微写一下子吧&#xff01;…...

编程日记 2024/7/23 20:27:24

自动驾驶系列—智能巡航辅助功能中的横向避让功能介绍

自动驾驶系列—智能巡航辅助功能中的车道中央保持功能介绍 自动驾驶系列—智能巡航辅助功能中的车道变换功能介绍 自动驾驶系列—智能巡航辅助功能中的横向避让功能介绍 自动驾驶系列—智能巡航辅助功能中的路口通行功能介绍 文章目录 1. 背景介绍2. 功能定义3. 功能原理4. 传感…...

编程日记 2024/7/23 20:21:20

通过this.$options.data()重置变量时，会影响到引用了props或methods的变量

之前的文章我有提到过通过this.$options.data().具体某个值来将该值进行初始化 但我在项目中遇到了一个问题&#xff1a; 具体情况是&#xff1a;在data中定义一个变量时有用到methods中的一个方法&#xff0c;在后续的方法中我通过this. $options.data.值去重置了另一个数据&…...

编程日记 2024/7/23 20:17:16

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2025/10/31 23:27:43

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/10/25 11:57:30

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/10/27 4:18:37

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/10/27 15:07:18

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/10/26 5:13:27

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/10/31 20:37:10

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

编程新知 2025/10/31 3:15:41

Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

编程新知 2025/7/24 5:10:25