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…...
KubeSphere 容器平台高可用：环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ 题目：KubeSphere 容器平台高可用：环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术，说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...
使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
uniapp 开发ios， xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档：manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号：4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁
赛门铁克威胁猎手团队最新报告披露，数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据，严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能，但SEMR…...
React从基础入门到高级实战：React 实战项目 - 项目五：微前端与模块化架构
React 实战项目：微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇！在前 29 篇文章中，我们从 React 的基础概念逐步深入到高级技巧，涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
一、前言 在HarmonyOS 5的应用开发模型中，featureAbility是旧版FA模型（Feature Ability）的用法，Stage模型已采用全新的应用架构，推荐使用组件化的上下文获取方式，而非依赖featureAbility。 FA大概是API7之…...
react-pdf（pdfjs-dist）如何兼容老浏览器（chrome 49）
之前都是使用react-pdf来渲染pdf文件，这次有个需求是要兼容xp环境，xp上chrome最高支持到49，虽然说iframe或者embed都可以实现预览pdf，但为了后续的定制化需求，还是需要使用js库来渲染。 chrome 49测试环境 能用的测试…...