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…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...
连锁超市冷库节能解决方案：如何实现超市降本增效
在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...
多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本： 3.8.1 语言： JavaScript/TypeScript、C、Java 环境：Window 参考：Java原生反射机制 您好，我是鹤九日！ 回顾 在上篇文章中：CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
css3笔记 （1） 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
docker 部署发现spring.profiles.active 问题
报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币，另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额，返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...