css 文字图片居中及网格布局
以下内容纯自已个人理解，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.centered-text {display: flex;justify-content: center;align-items: center;height: 100px; /* 容器的高度 */border: 1px solid #000; /* 边框仅为了清楚展示容器 *//*text-align: center; !* 水平居中 *!*//*padding-top: 25px; !* 垂直居中 *!*//*padding-bottom: 25px; !* 垂直居中 *!*//*box-sizing: border-box; !* 设置盒子的内边距计算方式为包含在宽度和高度之内 *!*/}/*.centered-text {*//* height: 100px; !* 容器的高度 *!*//* border: 1px solid #000; !* 边框仅为了清楚展示容器 *!*//* text-align: center; !* 水平居中 *!*//* line-height: 100px; !* 垂直居中,设置和容器高度一样 *!*//*}*//* 使用Flexbox实现图片居中 *//*.centered-img {*//* display: flex;*//* justify-content: center;*//* align-items: center;*//* height: 600px; !* 容器的高度 *!*//* border: 1px solid #000; !* 边框仅为了清楚展示容器 *!*//* padding-top: 150px;*//* padding-bottom: 150px;*//* box-sizing: border-box;*//* text-align: center;*//* !*max-width: 100%; !*表示图片的最大宽度不超过其父元素的100%，这样可以避免图片拉伸变形*!*!*//* !*height: auto; !*表示高度自动调整，以保持图片的原始宽高比*!*!*//*}*//* 使用Grid网格布局实现图片居中 */.centered-img {display: grid; /*设置为网格布局*/place-items: center; /* 这相当于 align-items: center 和 justify-items: center 的简写 */border: 1px solid #000;margin-bottom: 10px;}.centered-img img {max-width: 100%; /* 确保图片不会超过其容器 */height: auto; /* 保持图片的宽高比 *//*margin-right: 10px; !* 在图片和文字之间添加一些间隔 *!*/}.grid-head {grid-area: header; /*grid-area 属性来命名网格项,可以给下面的grid属性使用*/border: 1px solid #000;text-align: center;line-height: 60px;}.grid-container {display: grid;grid:"header header header" auto;grid-template-columns: auto auto auto; /*创建3列*/grid-template-rows: 60px auto; /*创建3行*//*background-color: #2196F3;*//*padding: 10px;*/}.grid-item {background-color: rgba(255, 255, 255, 0.8);border: 1px solid rgba(0, 0, 0, 0.8);padding: 20px;font-size: 30px;text-align: center;}</style>
</head>
<body><div class="centered-text">居中文字
</div>
<div class="centered-img"><p>图片居中</p>
<!-- <img src="" alt="图片" style="margin: auto; display: block;">-->
<!-- <img src="img/1723778588420.jpg" />--><img src="img/1723779175838.jpg" />
</div>
<div class="grid-container"><div class="grid-head">网格布局</div><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div><div class="grid-item">7</div><div class="grid-item">8</div><div class="grid-item">9</div>
</div>
</body>
</html>郊果如下：
相关文章：
css 文字图片居中及网格布局
以下内容纯自已个人理解，直接上代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...
解决ImportError: DLL load failed while importing _rust: 找不到指定的程序
解决ImportError: DLL load failed while importing _rust: 找不到指定的程序 python使用库cryptography 当 from cryptography.hazmat.bindings._rust import exceptions as rust_exceptions 时，会报错： ImportError: DLL load failed while importin…...
集合-List去重
1.利用Set去重 @Test public void distinctList() {List<String> oldList = new ArrayList<>();oldList.add("a");oldList.add("a");oldList.add("b");oldList.add("c");oldList.add("d");List<String> …...
ST-LINK USB communication error 非常有效的解决方法
文章目录 一、检查确定是ST-LINK USB communication error的问题二、关闭文件，打开keil软件所在文件夹，找到STLink文件夹，找到该应用程序双击 一、检查确定是ST-LINK USB communication error的问题 二、关闭文件，打开keil软件所在…...
探索CSS的:future-link伪类：选择指向未来文档的链接
CSS（层叠样式表）是Web设计中用于描述网页元素样式的语言。随着CSS4的提案，引入了许多新的选择器，其中之一是:future-link伪类。然而，需要注意的是，:future-link伪类目前还处于提议阶段，并没有在…...
【C++】序列与关联容器（三）map与multimap容器
【C】序列与关联容器（三）map与multimap容器 一、map二、multiset / multimap 一、map 树中的每个结点的类型是一个std::pair //pair的类型是<const key,value> pair是一个包含两个指针的结构体，第一个指针指向该节点的key，…...
ActiveMQ、RabbitMQ、Kafka、RocketMQ在优先级队列、延迟队列、死信队列、重试队列、消费模式、广播模式的区别
ActiveMQ、RabbitMQ、Kafka、RocketMQ这四款消息队列在优先级队列、延迟队列、死信队列、重试队列、消费模式、广播模式等方面各有其特点和差异。以下是对这些方面的详细比较： 1. 优先级队列 ActiveMQ：支持优先级队列，可以在发送消息时指定…...
首款会员制区块链 Geist 介绍
今天，Pixelcraft Studios 很高兴地宣布即将推出 Geist，这是一个由 Base、Arbitrum、Alchemy 以及 Aavegotchi 支持的全新 L3。 Geist 之前的代号为 “Gotchichain”，是首个专为游戏打造的会员专用区块链。 为什么选择 Geist？ …...
CANoe软件中Trace窗口的筛选栏标题不显示（空白）的解决方法
文章目录 问题描述原因分析解决方案扩展知识总结问题描述 不知道什么情况，CANoe软件中Trace窗口的筛选栏标题突然不显示了，一片空白。现象如下： 虽然不影响CANoe软件的使用，但是观感上非常难受，对于强迫症患者非常不友好。 原因分析 按照常规思路，尝试了： 1、重启CAN…...
日期类代码实现-C++
一、目标 通过前面对类和对象的介绍我们可以自己通过C代码初步实现一个简单的日期类。 实现的主要操作有： 1.日期类的构造函数 2.日期类的拷贝构造函数（在头文件中实现） 3.日期类的比较运算符重载 4.日期类的计算运算符重载 5.流插入运…...
【问题记录+总结】VS Code Tex Live 2024 Latex Workshop Springer模板----更新ing
目录 Summary 道阻且长 少即是多 兵马未动粮草先行 没有万能 和一劳永逸 具体问题具体分析 心态 Detail 1、关于模板[官网] 2、settings.json 3、虫和杀虫剂 4、擦 换成Tex Studio都好了。。。 Summary 道阻且长 某中意期刊，只有Latex。之前只简单用过…...
Linux运维_Bash脚本_源码安装Go-1.21.11
Linux运维_Bash脚本_源码安装Go-1.21.11 Bash (Bourne Again Shell) 是一个解释器，负责处理 Unix 系统命令行上的命令。它是由 Brian Fox 编写的免费软件，并于 1989 年发布的免费软件，作为 Sh (Bourne Shell) 的替代品。 您可以在 Linux 和…...
ShareSDK Twitter
创建应用 1.登录Twitter控制台并通过认证 2.点击Developer Portal进入Twitter后台 3.点击Sign up for Free Account创建应用 4.配置应用信息 以下为创建过程示例，图中信息仅为示例，创建时请按照真实信息填写，否则无法正常使用。 权限申请…...
word2vec 如何用多个词表示一个句子
word2vec 模型通常用于将单词映射为固定大小的向量。为了使用多个词表示一个句子，我们可以采用以下几种方法： 词袋模型 (Bag of Words, BoW): 将句子中所有词的向量加起来，不考虑词的顺序。这种方法简单，但会丢失词序信息。 计算…...
IDEA中查看接口的所有实现类和具体实现类
1.IDEA中接口的所有实现类查看 1.CTRLH(hierarchy 结构) 我们选中要查看的接口 按住快捷键ctrlh 在界面右侧可以看到该接口的所有可能实现类 2.右击diagrams->show diagram 选中要查看的接口 右击选择diagrams->show diagram 即可以以图表的方式查看接口和所有实现类…...
DLL的导出和调用
动态链接库在C中非常重要，写了一个简单的例子用于DLL的导出和调用。 DLL的生成 头文件 #include<iostream> #include<stdexcept> using namespace std;#define TESTAPI __declspec(dllexport)// 函数定义 extern "C" {TESTAPI int add(in…...
vscode中调试cuda kernel
关于vscode中调试cpp可参考之前的博客：ubuntu vscode 基本设置 和 调试设置_ubuntu vscode 调试-CSDN博客 这篇我们来讲如何调试.cu的kernel，主要参考的是：https://www.zhihu.com/question/431782036/answer/2468791220 1、基本准备不多说&am…...
SQL的连接查询与pandas的对应关系
在SQL和Pandas中，连接查询（join）是处理数据集之间关系的重要工具。下面是SQL中的各种连接查询类型及其与Pandas中相应操作的对应关系： 1. INNER JOIN SQL: INNER JOIN 返回两个表中具有匹配值的行。 Pandas: merge() 方法的 how…...
【JS】中断和恢复任务序列
前言 封装processTasks函数，实现以下需求 /*** 依次顺序执行一系列任务* 所有任务全部完成后可以得到每个任务的执行结果* 需要返回两个方法，start用于启动任务，pause用于暂停任务* 每个任务具有原子性，即不可中断，只…...
CentOS系统下安装NVIDIA显卡驱动
一、安装显卡驱动 1.安装依赖项 yum -y install gcc pciutils yum -y install gcc yum -y install gcc-c yum -y install make2.查看内核版本 uname -a3.查看显卡版本 lspci | grep -i nvidia4.屏蔽系统自带的nouveau (1)查看nouveau lsmod | grep nouveau (2)打开blackl…...
用 OpenAI Codex 打造你的 AI 结对编程助手
用 OpenAI Codex 打造你的 AI 结对编程助手 告别重复劳动，让 AI 直接帮你写代码、修 Bug、跑测试 在 AI 编程工具层出不穷的今天，OpenAI Codex 依然是许多开发者心目中的“神器”。与普通的代码补全工具不同，Codex 是一款终端原生的 AI 编程助…...
Spring PetClinic实战解析：从单体应用到云原生部署的5大架构亮点
Spring PetClinic实战解析：从单体应用到云原生部署的5大架构亮点 【免费下载链接】spring-petclinic A sample Spring-based application 项目地址: https://gitcode.com/gh_mirrors/sp/spring-petclinic 你是否遇到过这样的困境：在学习Spring框架…...
Qwen3.5-35B-A3B-AWQ-4bit镜像技术亮点：服务重启自动恢复+模型热加载+无状态前端设计
Qwen3.5-35B-A3B-AWQ-4bit镜像技术亮点：服务重启自动恢复模型热加载无状态前端设计 1. 平台核心能力介绍 Qwen3.5-35B-A3B-AWQ-4bit是一款专为视觉多模态理解设计的量化模型，它将强大的图文理解能力与高效的部署特性完美结合。这个模型特别适合需要分析…...
TMSpeech：Windows端离线实时语音转文字工具的完整使用指南
TMSpeech：Windows端离线实时语音转文字工具的完整使用指南 【免费下载链接】TMSpeech 腾讯会议摸鱼工具 项目地址: https://gitcode.com/gh_mirrors/tm/TMSpeech 在数字办公和在线会议成为日常的今天，你是否曾因会议内容过多而错过关键信息&#…...
避坑指南：SpringBoot整合Drools 7.20时热部署冲突的解决方案
SpringBoot与Drools 7.20热部署冲突深度排查指南 当SpringBoot的devtools热部署功能遇上Drools规则引擎，就像两个高效率的工人同时修改同一台机器——看似都能独立工作，组合时却可能引发难以察觉的运行时故障。本文将带您深入这个典型的技术冲突现场&…...
Buildroot构建根文件系统时，为什么你的rootfs.tar总比别人的大？深度解析裁剪技巧
Buildroot构建根文件系统时rootfs.tar体积优化实战指南 当你在嵌入式Linux开发中使用Buildroot构建根文件系统时，是否经常遇到生成的rootfs.tar文件体积过大的问题？本文将深入解析Buildroot的打包机制，揭示那些容易被忽视的体积膨胀陷阱&…...
Docker 部署 Vaultwarden：轻量级自托管密码管理解决方案
1. 为什么选择Vaultwarden作为自托管密码管理方案 在这个数字时代，我们每个人平均要管理超过100个在线账户的密码。传统的密码管理方式——用同一个简单密码注册所有网站，或者把密码写在记事本上——已经远远不能满足安全需求。这就是为什么像Bitwarden这…...
java rabbitmq实现消息协作
场景：数据下载采用rpa实现，数据服务采用java springboot实现，需要进行一键数据补录操作1、设置消息承载的通信队列，java 发送任务到rabbitmq和rpa端收到消息（neimeng_data_download）后，将下载结…...
精益生产方式的核心功能拆解：精益生产方式如何解决多品种小批量场景下的库存积压难题
在当前制造业从“少品种大批量”向“多品种小批量”急剧转型的背景下，精益生产方式已成为企业打破库存僵局的唯一出路，它通过准时化拉动和消除浪费的核心逻辑，精准解决了传统模式下因预测失效导致的严重库存积压问题；面对多变的订…...
DownKyi架构深度解析：高效B站视频下载工具的技术实现与实战指南
DownKyi架构深度解析：高效B站视频下载工具的技术实现与实战指南 【免费下载链接】downkyi 哔哩下载姬downkyi，哔哩哔哩网站视频下载工具，支持批量下载，支持8K、HDR、杜比视界，提供工具箱（音视频提取、去水印…...