CSS--图片链接垂直居中展示的方法
原文网址：CSS--图片链接垂直居中展示的方法-CSDN博客
简介
本文介绍CSS图片链接垂直居中展示的方法。
图片链接
问题复现
源码
<html xml:lang="cn" lang="cn"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="keywords" content="anchor,fixed navigation hide anchor"><title></title>
</head><body><div class="container2"style="width: 400px ; height: 400px ; border: 3px solid black;"><a target="_blank" href="https://baidu.com"><img src=../img/bat.png alt="乒乓球拍"></a>
</div></body></html>结果
方案1：flex布局
代码
<html xml:lang="cn" lang="cn"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="keywords" content="anchor,fixed navigation hide anchor"><title></title>
</head><body><div class="container2" style="width: 400px; height: 400px; border: 3px solid black; display: flex; align-items: center;"><a target="_blank" href="https://baidu.com"><img src="../img/bat.png" alt="乒乓球拍"></a>
</div></body></html>结果
方案2：绝对定位
代码
<html xml:lang="cn" lang="cn"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="keywords" content="anchor,fixed navigation hide anchor"><title></title>
</head><body><div class="container2" style="width: 400px; height: 400px; border: 3px solid black; position: relative;"><a target="_blank" href="https://baidu.com"><img src="../img/bat.png" alt="乒乓球拍" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></a>
</div></body></html>结果
元素背景图
问题复现
代码
<html xml:lang="cn" lang="cn"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="keywords" content="anchor,fixed navigation hide anchor"><title></title>
</head><body><div class="container1"style="width: 400px ; height: 400px ; border: 3px solid black;
background-image: url(../img/bat.png); background-repeat:no-repeat;"></div></body></html>结果
解决方案
添加CSS：background-position:center center;
代码
<html xml:lang="cn" lang="cn"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="keywords" content="anchor,fixed navigation hide anchor"><title></title><style>body {/*display: flex;*/}</style>
</head><body><div class="container1"style="width: 400px ; height: 400px ; text-align: center; border: 3px solid black;
background-image: url(../img/bat.png); background-repeat:no-repeat;background-position:center center;"></div></body></html>结果
相关文章：
CSS--图片链接垂直居中展示的方法
原文网址：CSS--图片链接垂直居中展示的方法-CSDN博客 简介 本文介绍CSS图片链接垂直居中展示的方法。 图片链接 问题复现 源码 <html xml:lang"cn" lang"cn"><head><meta http-equiv"Content-Type" content&quo…...
聊聊Spring AI autoconfigure模块的拆分
序 本文主要研究一下Spring AI autoconfigure模块的拆分 v1.0.0-M6版本 (base) ➜ spring-ai-spring-boot-autoconfigure git:(v1.0.0-M6) tree -L 9 . ├── pom.xml ├── src │ ├── main │ │ ├── java │ │ │ └── org │ │ │ └…...
【Elastsearch】如何获取已创建的api keys
『这种方法其实无法获取秘钥，只是获取了秘钥的名字等信息』 在Elasticsearch中，可以通过API获取已创建的API密钥（API keys）。以下是具体步骤和示例： 1.使用GET请求获取API密钥 Elasticsearch提供了GETAPI，用…...
Flutter异步原理-Future
前言 在 Dart 中，谈到异步就离不开 Future。无论是 .then()、还是 await，它们背后运作的都是一个私有实现类：_Future ，我们平时使用的 Future 只是一个抽象接口，其真正的实现逻辑由_Future 承担。 class _Future<…...
TRAE 配置blender MCP AI自动3D建模
BlenderMCP - Blender模型上下文协议集成 BlenderMCP通过模型上下文协议(MCP)将Blender连接到Claude AI，允许Claude直接与Blender交互并控制Blender。这种集成实现了即时辅助的3D建模、场景创建和操纵。 1.第一步下载 MCP插件(addon.py):Blender插件，在…...
VUE2课程计划表练习
主要练习数据变量对象 以下是修正后的完整代码： //javascript export default {data() {return {list: [{ id: 1, subject: Vue.js 前端实战开发, content: 学习指令，例如 v-if、v-for、v-model 等, place: 自习室, status: false }// 可以在这里添加更…...
虚拟文件系统
虚拟文件系统（Virtual File System，VFS）是操作系统内核中的一个抽象层，它为不同的文件系统（如ext4、NTFS、FAT32等）提供统一的访问接口。通过VFS，用户和应用程序无需关心底层文件系统的具体差异…...
2025年软件工程与数据挖掘国际会议(SEDM 2025)
2025 International Conference on Software Engineering and Data Mining 一、大会信息 会议简称：SEDM 2025 大会地点：中国太原 收录检索：提交Ei Compendex,CPCI,CNKI,Google Scholar等 二、会议简介 2025年软件开发与数据挖掘国际会议于…...
基于大模型预测的足月胎膜早破行阴道分娩全流程研究报告
目录 一、引言 1.1 研究背景与意义 1.2 研究目的与方法 1.3 研究创新点 二、胎膜早破（足月）行阴道分娩概述 2.1 胎膜早破定义与分类 2.2 足月胎膜早破行阴道分娩的现状与挑战 2.3 大模型预测引入的必要性 三、大模型预测原理与技术 3.1 大模型介绍 3.2 数据收集与…...
学习记录：DAY28
DispatcherController 功能完善与接口文档编写 前言 没什么动力说废话了。 今天来完善 DispatcherController 的功能，然后写写接口文档。 日程 早上：本来只有早八，但是早上摸鱼了，罪过罪过。下午：把 DispatcherContro…...
软件系统中功能模型 vs 数据模型 对比解析
功能模型 vs 数据模型 对比解析 一、功能模型（Functional Model） 定义：描述系统 做什么（业务逻辑与操作流程） 核心关注：行为、交互、业务流程 建模工具： 用例图（UML Use Case Dia…...
.NET高频技术点（持续更新中）
1. .NET 框架概述 .NET 框架的发展历程.NET Core 与 .NET Framework 的区别.NET 5 及后续版本的统一平台 2. C# 语言特性 异步编程（async/await）LINQ（Language Integrated Query）泛型与集合委托与事件属性与索引器 3. ASP.NET…...
pandas中的数据聚合函数：`pivot_table` 和 `groupby`有啥不同？
pivot_table 和 groupby 是 pandas 中两种常用的数据聚合方法，它们都能实现数据分组和汇总，但在使用方式和输出结构上有显著区别。 0. 基本介绍 groupby分组聚合 groupby 是 Pandas 库中的一个功能强大的方法，用于根据一个或多个列对数据进…...
微调大模型如何准备数据集——常用数据集，Alpaca和ShareGPT
微调大模型如何准备数据集——常用数据集，Alpaca和ShareGPT 数据集准备常用数据集自定义数据集AlpacaShareGPT数据集准备 常用数据集 预训练数据集 Wiki Demo (en)RefinedWeb (en)RedPajama V2 (en)Wikipedia (en)Wikipedia (zh)Pile (en)...
【Gradio】helloworld程序
前言 发现这个库用来做可视化的demo还不错，简单学习一下。 官网 https://www.gradio.app/ 安装 pip install gradio -i https://pypi.tuna.tsinghua.edu.cn/simple/helloWorld 示例 import gradio as grdef greet(name):return "hello"nameifacegr…...
机器学习例题——预测facebook签到位置（K近邻算法）和葡萄酒质量预测（线性回归）
一、预测facebook签到位置 代码展示： import pandas as pd from sklearn.preprocessing import StandardScaler from sklearn.model_selection import train_test_split from sklearn.neighbors import KNeighborsClassifier from sklearn.model_selection import…...
对golang中CSP的理解
概念： CSP模型，即通信顺序进程模型，是由英国计算机科学家C.A.R. Hoare于1978年提出的。该模型强调进程之间通过通道（channel）进行通信，并通过消息传递来协调并发执行的进程。CSP模型的核心思想是“不要通过…...
使用 pgrep 杀掉所有指定进程
使用 pgrep 杀掉所有指定进程 pgrep 是一个查找进程 ID 的工具，结合 pkill 或 kill 命令可以方便地终止指定进程。以下是几种方法： 方法1：使用 pkill（最简单） pkill 进程名例如杀掉所有名为 “firefox” 的进程&…...
Missashe考研日记-day36（改版说明）
Missashe考研日记-day36 改版说明 经过一天的思考、纠结和尝试，博主决定对更新内容进行改版，如下：1.不再每天都发一篇日记，改为一周发一篇包含一周七天学习进度的周记，但为了标题和以前相同（强迫症&#…...
基于Jetson Nano与PyTorch的无人机实时目标跟踪系统搭建指南
引言：边缘计算赋能智能监控 在AIoT时代，将深度学习模型部署到嵌入式设备已成为行业刚需。本文将手把手指导读者在NVIDIA Jetson Nano（4GB版本）开发板上，构建基于YOLOv5SORT算法的实时目标跟踪系统，集成无人…...
【LunarVim】CMake LSP配置
在 LunarVim 中为 CMakeLists.txt 文件启用代码提示（如补全和语义高亮），需要安装支持 CMake 的 LSP（语言服务器）和适当的插件。以下是完整配置指南： 1、配置流程 1.1 安装cmake-language-server 通过 Ma…...
Mkdocs页面如何嵌入PDF
嵌入PDF 嵌入PDF代码 ，注意PDF的相对地址 <iframe src"../个人简历.pdf (相对地址)" width"100%" height"800px" style"border: 1px solid #ccc; overflow: auto;"></iframe>我的完整代码： <d…...
从零开始学Flink：开启实时计算的魔法之旅
在凌晨三点的数据监控大屏前，某电商平台的技术负责人突然发现一个异常波动：支付成功率骤降15%。传统的数据仓库此时还在沉睡，而基于Flink搭建的实时风控系统早已捕捉到这个信号，自动触发预警机制。当运维团队赶到时，系…...
融合静态图与动态智能：重构下一代智能系统架构
引言：智能系统的分裂 当前的大模型系统架构正处于两个极端之间： 动态智能体系统：依赖语言模型动态决策、自由组合任务，智能灵活但稳定性差； 静态流程图系统：具备强工程能力，可控可靠…...
滑动窗口-窗口中的最大/小值-单调队列
求窗口的最大值 #include <iostream> //滑动窗口最大值用单调队列q[]，q存储候选最大值的下标 //队列头是最大值的下标 using namespace std; const int N100010; int nums[N],q[N]; int hh0,tt-1;// hh 是队头指针，tt 是队尾指针，初始…...
Java设计模式全面详解：从基础到高级的23种模式简介
引言：设计模式概述 设计模式是软件设计中常见问题的典型解决方案，它们就像预制的蓝图，你可以通过调整来解决代码中反复出现的设计问题。Java设计模式通常分为三大类： 创建型模式：处理对象创建机制结构型模式：处理对象组合行为型模式：处理对象间的交互与职责分配#mermai…...
WORD压缩两个免费方法
日常办公和学习中，Word文档常常因为包含大量图片、图表或复杂格式而导致文件体积过大，带来诸多不便，比如 邮件发送受限：许多邮箱附件限制在10-25MB，大文件无法直接发送 存储空间占用：大量文档占用硬盘或云…...
skywalking服务安装与启动
skywalking服务安装并启动 1、介绍2、下载apache-skywalking-apm3、解压缩文件4、创建数据库及用户5、修改配置文件6、下载 MySQL JDBC 驱动7、启动 OAP Serve,需要jkd11,需指定jkd版本,可以修改文件oapService.sh8、启动 Web UI,需要jkd11,需指定jkd版本,可以修改文件oapServi…...
Qt 中信号与槽（signal-slot）机制支持 多种连接方式（ConnectionType）
Qt 中信号与槽（signal-slot）机制支持 多种连接方式（ConnectionType） Qt 中信号与槽（signal-slot）机制支持 多种连接方式（ConnectionType），用于控制信号发出后如何调用槽…...
Booth Encoding vs. Non-Booth Multipliers —— 穿透 DC 架构看乘法器的底层博弈
目录 🧭 前言 🌱 1. Non-Booth 乘法器的实现原理（也叫常规乘法器） 🔧 构建方式 ✍️ 例子：4x4 Non-Booth 乘法器示意 🧱 硬件结构 ✅ 特点总结 ⚡ 2. Booth Encoding（布斯编码…...