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

多个子div在父中垂直居中

在一个div下,有多个子div,且子div都是水平垂直居中
在这里插入图片描述

<template><div><div class="far"><!-- 注意需要多包裹一层 --><div><div class="son1">1</div><div class="son2">22221</div></div></div></div>
</template><script>
export default {data() {return {}},
}
</script><style lang="less" scoped>div {text-align: center;
}.far {width: 400px;height: 300px;background-color: #98f3cd;// flex布局居中display: flex;justify-content: center;align-items: center;.son1{background-color: cyan;// 如果需要自适应宽度和居中--打开这两行代码width: fit-content;margin:auto; // 解决自适应宽度的居中问题}.son2{background-color: cyan;width: 200px;}
}
</style>

相关文章:

多个子div在父中垂直居中

在一个div下&#xff0c;有多个子div&#xff0c;且子div都是水平垂直居中 <template><div><div class"far"><!-- 注意需要多包裹一层 --><div><div class"son1">1</div><div class"son2">222…...

[C国演义] 第十五章

第十五章 最长湍流子数组环绕字符串中唯⼀的⼦字符串 最长湍流子数组 力扣链接 子数组 ⇒ dp[i]的含义: 以arr[i] 结尾的所有子数组中的最长湍流子数组的长度 子数组 ⇒ 状态转移方程根据 最后一个位置来划分&#x1f447;&#x1f447;&#x1f447; 初始化: 都初始化为…...

Docker Compose和Consul

目录 Docker-compose Docker-compose 简介 YAML 文件格式及编写注意事项 Docker Compose配置常用字段 Docker Compose 常用命令 Docker Compose 文件结构 compose 部署 Docker Compose 环境安装 准备依赖文件 编写配置文件docker-compose.yml Consul consul 部署 c…...

Wireshark新手小白基础使用方法

一、针对IP抓取 1、过滤格式&#xff1a; &#xff08;1&#xff09;、ip.src eq x.x.x.x &#xff08;2&#xff09;、ip.dst eq x.x.x.x &#xff08;3&#xff09;ip.src eq x.x.x.x or ip.dst eq x.x.x.x 二、针对端口过滤 1、过滤格式&#xff1a; &#xff08;1&a…...

互动设计:深入了解用户体验的关键

交互是人与计算机系统之间的互动过程。在计算机领域中&#xff0c;交互是人机交互技术的核心内容之一。交互设计是一种基于人类行为科学、心理学、人体工程学等领域的专业设计&#xff0c;目的是创造用户友好的、易于使用的计算机软件、网络、移动应用等。交互的本质在于用户的…...

maven的坐标元素

maven的坐标&#xff1a;使用三个向量在Maven仓库中唯一的定位到一个jar包 * groupId&#xff1a;公司或组织的ID * artifactId&#xff1a;一个项目或者是项目中的一个模块的ID * version&#xff1a;版本号 <groupId>com.gz.maven</groupId> <artifactId&…...

蓝桥杯 题库 简单 每日十题 day13

01 乘积尾零 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将 所填结果输出即可。如下的10行数据&#xff0c;每行有10个整数&#xff0c;请你求出它们的乘积的末尾有多少个零&#xff1f; 5650 4542 3554 473 946 4114 3871 9073 90 …...

联想G50笔记本直接使用F键功能(F1~F12)需要在BIOS设置关闭热键功能可以这样操作!

如果开启启用热键模式按F1就会出现FnF1的效果&#xff0c;不喜欢此方式按键的用户可以进入BIOS设置界面停用热键模式即可。 停用热键模式方法如下&#xff1a; 1、重新启动笔记本电脑&#xff0c;当笔记本电脑屏幕出现Lenovo标识的时候&#xff0c;立即按FnF2进入BIOS设置界面…...

C++入门(头文件,命名空间,作用域,输入输出流,引用,缺省参数,函数重载)

目录 一&#xff0c;头文件 二,命名空间 三&#xff0c;作用域 四&#xff0c;输入输出流 五&#xff1a;引用 六&#xff0c;缺省参数 七&#xff0c;函数重载 一&#xff0c;头文件 C的头文件与C是有差距的&#xff0c;C的头文件是#include<stdio.h>,而C是#inc…...

“Linux免除系统交互操作方法、expect自动化交互工具” 及 “SSH批量修改主机密码脚本”

一、Linux系统免除交互操作方法 1、EOF多文本输入 案例&#xff1a;为机器磁盘进行分区并实现挂载&#xff0c;免交互式操作&#xff0c;如何实现&#xff1f; #!/bin/bash fdisk /dev/sdb <<EOF n p 1 wq EOFmkfs.xfs /dev/sdb1 && mkdir -p /data &&am…...

三相异步电机动态数学模型及矢量控制仿真

三相异步电机动态数学模型及矢量控制仿真 本文带你一步步推倒三相异步电机动态数学模型&#xff0c;按基于转子磁链定向的矢量控制进行 matlab 仿真&#xff0c;实现较好的控制效果。 1、异步电机三相方程 2、坐标变换 3、磁链3/2变换推导 4、两相静止坐标系下的方程 5、…...

HTML5 新增表单标签

HTML5为表单添加了一些新的语义化标签&#xff0c;可以更好地描述表单内容和功能。下面是新增的表单标签及其功能&#xff1a; <datalist>标签&#xff1a;用于定义一个选项列表&#xff0c;供用户选择或输入。 <output>标签&#xff1a;用于显示表单提交后的结果…...

【版本控制】Git(学习笔记)

一、Git工作流程图 clone&#xff08;克隆&#xff09;: 从远程仓库中克隆代码到本地仓库checkout &#xff08;检出&#xff09;&#xff1a;从本地仓库中检出一个仓库分支然后进行修订add&#xff08;添加&#xff09;: 在提交前先将代码提交到暂存区commit&#xff08;提交&…...

C语言,求一个整数的全部素数因子

#include <stdio.h> int prime(int x)//一旦x被2到x-1的数整除&#xff0c;就返回0&#xff0c;一直不被整除&#xff0c;才返回1。 {int j 0;for (j 2; j < x; j){if (x % j 0){return 0;}}return 1; } int main() {int n 0;scanf("%d", &n);int i…...

Jenkins更换主目录

Jenkins储存所有的数据文件在这个目录下. 你可以通过以下几种方式更改&#xff1a; 使用你Web容器的管理工具设置JENKINS_HOME环境参数.在启动Web容器之前设置JENKINS_HOME环境变量.(不推荐)更改Jenkins.war(或者在展开的Web容器)内的web.xml配置文件. 这个值在Jenkins运行时…...

迅为RK3588开发板使用RKNN-Toolkit-lite2运行测试程序

1 首先也需要部署运行环境&#xff0c;将库文件放入 RK3588 开发板上&#xff0c;我们将网盘资料“iTOP-3588 开发 板 \02_ 【 iTOP-RK3588 开 发 板 】 开 发 资 料 \12_NPU 使 用 配 套 资 料 \05_Linux_librknn_api\librknn_api\aarch64”路径下的文件通过U盘拷贝到开发板的…...

1990-2023:RPA的变革之路

01 第一阶段&#xff1a;初级助手与UI测试 阶段简介&#xff1a; RPA开始于简单的数据导入和用户界面测试 在最早期的阶段中&#xff0c;RPA又可比作虚拟化助手&#xff0c;能够助力人力实施的基本数据导入&#xff0c;然而辅助作业时尚需人为操作。RPA 的故事始于用户界面 (U…...

SQL 语法

SQL 语法规则 SQL语句总是以关键字开始&#xff0c;如SELECT、INSERT、UPDATE、DELETE、DROP、CREATE。SQL语句以分号结尾。SQL不区分大小写&#xff0c;意味着update与UPDATE相同。 数据库表 数据库通常包含一个或多个表。每个表都用一个名称标识&#xff08;例如&#xff0c;…...

吃鸡达人必备神器,提升战斗力享受顶级游戏干货!

大家好&#xff01;今天我为大家介绍一款专为吃鸡玩家打造的神器——吃鸡盒子。无论您是新手还是老玩家&#xff0c;吃鸡盒子都能帮助您提升游戏的战斗力&#xff0c;分享顶级游戏作战干货&#xff0c;并且还能方便吃鸡作图、查询库存和保护账号安全。 让我们先来说说提升战斗力…...

PyTorch 深度学习之循环神经网络(基础篇)Basic RNN(十一)

0.Revision: DNN dense 重义层 全连接 RNN处理带有序列的数据 1. What is RNNs? linear layer 1.1 What is RNN? tanh (-1, 1) 1.2 RNN Cell in PyTorch 1.3 How to use RNNCell *先把维度搞清楚 多了一个序列的维度 2. How to use RNN 2.1 How to use RNN - numLayers…...

【AI工具篇】10款免费AI聊天与绘画神器:从GPT到Stable Diffusion的全方位体验

1. GPT机器人&#xff1a;全能型AI助手 这款工具可以说是AI领域的瑞士军刀&#xff0c;既能陪你聊天又能帮你画画。我实测下来最惊艳的是它直接集成了GPT-4模型&#xff0c;要知道很多收费工具都还在用3.5版本。打开应用就像有个学霸朋友随时待命——上周我写项目方案卡壳时&am…...

从桁架到螺栓:HM-3420在汽车后桥装配中的实战应用

HM-3420螺栓连接技术在汽车后桥装配中的创新实践 汽车后桥作为承载车身重量与传递动力的关键部件&#xff0c;其结构强度直接关系到整车安全性能。在传统装配工艺中&#xff0c;桁架连接往往面临应力集中、疲劳寿命不足等挑战。HM-3420螺栓连接系统的出现&#xff0c;为这一领域…...

Gpmall分布式事务处理:订单创建与库存扣减的最终一致性保障

Gpmall分布式事务处理&#xff1a;订单创建与库存扣减的最终一致性保障 【免费下载链接】gpmall 项目地址: https://gitcode.com/gh_mirrors/gp/gpmall 在电商系统中&#xff0c;订单创建与库存扣减的分布式事务处理是确保数据一致性的核心挑战。Gpmall项目通过创新的P…...

Avalonia预览器罢工了?别慌,手把手教你排查和修复‘无法加载axaml预览’的坑

Avalonia预览器崩溃自救指南&#xff1a;从错误日志到配置优化的全链路解决方案 当你正沉浸在Avalonia跨平台UI开发的流畅体验中&#xff0c;突然发现预览窗口变成一片空白&#xff0c;右下角弹出"无法加载axaml预览"的红色警告——这种突如其来的开发中断&#xff0…...

把 SAP Fiori 后端授权模型讲透:从 PFCG、Catalog 到 SU24 的一条完整链路

很多团队在上线 SAP Fiori 应用时,会把注意力集中在前端目录、磁贴和页面配置上,结果到了联调或上线阶段才发现:用户明明能看到应用入口,点击之后却报错;或者应用能打开,但列表为空;再或者少数用户能看到不该看的业务数据。问题往往不在 UI 本身,而在后端授权模型没有真…...

QLVideo:macOS视频管理效率提升的完整解决方案

QLVideo&#xff1a;macOS视频管理效率提升的完整解决方案 【免费下载链接】QuickLookVideo This package allows macOS Finder to display thumbnails, static QuickLook previews, cover art and metadata for most types of video files. 项目地址: https://gitcode.com/g…...

AI教材生成大揭秘!工具选择与低查重教材编写的实用干货

在教材编写的过程中&#xff0c;许多编辑者常常会感到遗憾&#xff1a;尽管正文章节已经经过了反复打磨&#xff0c;但因为缺乏必要的配套资源&#xff0c;整体教学效果却受到影响。课后练习的设计需要具有层次感&#xff0c;但缺乏灵活的想法&#xff1b;教学课件希望能做到形…...

Nuxt4 官网访问来源统计的实现

今天我遇到一个值得记录的问题&#xff0c;场景是这样的&#xff1a;官网后台需要做访问统计&#xff0c;我得把访问来源和访问目标的 URL 传递给后端。绕了好一阵子&#xff0c;才终于理清楚。 项目结构上&#xff0c;Nuxt 4 负责官网展示&#xff0c;后端是 Java 服务。核心…...

Flink技术实践-超时异常踩坑与优化

一、背景介绍在Flink实时计算的生产环境中&#xff0c;最令人头疼的往往不是复杂的业务逻辑&#xff0c;而是那些突如其来的“超时异常”。这些异常就像是系统中的“幽灵”&#xff0c;通常在业务高峰期或网络抖动时出现&#xff0c;导致作业重启、数据延迟甚至数据丢失。最近几…...

Anthropic调整Claude使用限制以缓解高峰时段需求压力

Anthropic公司周三调整了Claude客户的使用限制策略&#xff0c;在高峰需求时段降低服务功率&#xff0c;以平衡用户需求与其服务交付能力。Anthropic技术团队成员Thariq Shihipar在社交媒体上发布消息称&#xff1a;"为了管理Claude日益增长的需求&#xff0c;我们正在调整…...