水平居中、垂直居中的几种方法

news/2024/5/19 19:04:17/

 水平居中的方法:

    若是针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素

父元素设置 text-align:center;

绝对定位;弹性布局;grid网格布局

     不定宽块状元素

设置 margin:auto;

绝对定位;弹性布局;grid网格布局;table表布局

grid网格布局:

​​阮一峰 CSS Grid 网格布局教程:

CSS Grid 网格布局教程 - 阮一峰的网络日志

.farther {display: grid;justify-content: center;}

table表布局: 

.father {display: table;
}.children {display: table-cell;text-align: center; 
}

垂直居中的方法:          

      若为单行内联(inline-)元素:

通过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中;

绝对定位;弹性布局;table表布局;grid网格布局

      不定宽块状元素:

绝对定位;弹性布局;table表布局;grid网格布局

grid网格布局:

.farther {display: grid;justify-content: center;align-content: center;}

table表布局:

.father {display: table;
}.children {display: table-cell;vertical-align: middle;text-align: center; 
}


http://www.ppmy.cn/news/48259.html

相关文章

第二章:uniapp整合axios之真机测试两问题

第二章:uniapp整合axios之真机测试两问题 上一章节,笔者编写了uniapp整合axios并实现前后端跨域请求的方案,完成了这些基本配置后,在浏览器端的测试基本是可以完成了,但是当笔者将程序运行到手机时,却出现…

springboot mybatis-plus 对接 sqlserver 数据库 批处理的问题 批量更新添加数据 方案三

问题: 在对接 sqlserver数据库的时候 主子表 保存的时候 子表批量保存 使用的 mybatis-plus提供的 saveOrUpdateBatch saveBatch 这两个方法 但是 报错 报错内容为 : com.microsoft.sqlserver.jdbc.SQLServerException: 必须执行该语句才能获得结果。 框…

springboot web项目统一时区方案

背景 springboot项目国际化中,会遇到用户选择的时间和最终存到数据库的时间不一致,可能就是项目开发和部署时的时区没有处理好,导致时间转换出现了问题。 先了解时区都有哪些: 1.GMT:Greenwich Mean Time 格林威治…

Kubernetes Operator开发

案例一 Traefik Operator开发 1.kubebuilder 创建项目 2.Crontroller开发与部署 开发环境准备 kubebuilder 介绍 CRD的开发与部署 Crontroller开发与部署 Operator功能设计 借助operator完成 和企业内部注册中心打通 这里以Traefiketcd的模式为例进行演示说明 在这里etcd p…

1.2和1.3、GCC

1.2和1.3、GCC 1.2和1.3、GCC1.2.1、什么是GCC1.2.2、编程语言的发展1.2.3、GCC工作流程1.2.4、gcc和g的区别1.2.5、GCC常用参数选项实际操作①接下来进行预处理操作(test.c为需要预处理的源代码,test.i为要生成的目标代码)②汇编操作&#x…

多线程基础

1.多线程基础概念 多线程:让程序同时做多件事情 多线程作用:提高效率 并发:在同一时间,有多个指令在单个cpu上交替执行 并行:在同一时刻,有多个指令在多个cpu上同时执行 2.多线程的实现 (1)继承Thread类…

电脑卡顿反应慢怎么处理?电脑提速,4个方法!

案例:电脑卡顿反应慢怎么处理? 【快帮帮我!我的电脑现在越用越卡了,有时候光是打开一个文件都要卡好几分钟,我真的太难了,有什么可以加速电脑反应速度的好方法吗?万分感谢!】 随着…

es7.x集群部署-多台物理机部署-docker环境部署-docker-compose管理

es集群部署文档 部署es服务的三台服务器的ip和host分分别是: iphost_name192.168.1.2web02192.168.1.3storage02192.168.1.4Storage03 这个配置需要在服务器上编写对应的hosts文件,然后才可以使用host进行配置。 本次部署没有外挂配置文件&#xff0…

手把手教你 DVOL

分享本文在朋友圈的读者可获得本文数据和 Python 代码。留个言说已分享(不用截屏)我相信你,我会发给你百度盘下载链接。 本文长度为 6393 字,建议阅读 32 分钟 题图:SignalPlus Dashboard 0 引言 Deribit volatility (…

Qt音视频开发37-识别鼠标按下像素坐标

一、前言 在和视频交互过程中,用户一般需要在显示视频的通道上点击对应的区域,弹出对应的操作按钮,将当前点击的区域或者绘制的多边形区域坐标或者坐标点集合,发送出去,通知其他设备进行处理。比如识别到很多人脸,用户单击某个人脸后指定对该人脸进行详细的信息查询等;…

记录webpack安装

在安装完 yarn以后,yarn安装_阿巴资源站的博客-CSDN博客 然后开始安装webpack 看网上有人说npm install webpack-cli -g没成功,于是没试直接跳过坑 sudo npm install webpack -g --unsafe-permtrue --allow-root 然后提示: webpack -v On…

RabbitMQ:消息中间件

文章目录 概念管理界面简介4中常见交换器类型1.Direct交换器:2.Fanout交换器3.Topic交换器4.headers交换器 对象类型消息传递同步等待使用代码创建队列待续...... 概念 在微服务架构中项目之间项目A调用项目B 项目B调用项目C项目C调用项目D。。 用户必须等待项目之间内容依次的…

【闲聊杂谈】HTTPS原理详解

HTTPS和HTTP的区别 HTTP虽然使用极为广泛, 但是却存在不小的安全缺陷, 主要是其数据的明文传送和消息完整性检测的缺乏, 而这两点恰好是网络支付, 网络交易等新兴应用中安全方面最需要关注的。 关于 HTTP的明文数据传输, 攻击者最常用的攻击手法就是网络嗅探, 试图从传输过程…

亚马逊广告运营常见问答

同一个广告组中,建议投放多少个关键词呢? 同一广告组下我们建议投放的关键词至多不超过50个。 1.如关键词设置过少(且前期无法用数据佐证其精准引流效果时),有可能导致广告曝光量较低; 2.如关键词设置过多…

SAS学习第9章:卡方检验之适合性检验与独立性检验

卡方检验就是统计样本的实际观测值与理论推断值之间的偏离程度,实际观测值与理论推断值之间的偏离程度就决定卡方值的大小,如果卡方值越大,二者偏差程度越大;反之,二者偏差越小;若两个值完全相等时&#xf…

查询练习:按等级查询

建立一个 grade 表代表学生的成绩等级,并插入数据: CREATE TABLE grade (low INT(3),upp INT(3),grade char(1) );INSERT INTO grade VALUES (90, 100, A); INSERT INTO grade VALUES (80, 89, B); INSERT INTO grade VALUES (70, 79, C); INSERT INTO …

U-Boot 命令使用

进入 uboot 的命令行模式以后输入“help”或者“?”,然后按下回车即可查看当前 uboot 所 支持的命令,如图 所示: 我们输入“help(或?) 命令名”既可以查看命令的详细用法,以“bootz”这 个命令为例,我们输…

使用FFMPEG库将YUV编码为H264

准备 ffmpeg 4.4 p准备一段yuv420p的格式的视频原始数据 这里我们使用命令直接提取 ffmpeg -i .\beautlWorld.mp4 -pixel_format yuv420p -s 1280x720 yuv420p_1280x720.yuv 编码流程 大致可以分为以下几步: 1.初始化编码器并设置参数 2.初始化AVPacket和AVFr…

适应大、中、小型医院的手术麻醉临床信息管理系统源码

手术麻醉管理系统是一款专门用于医院手术麻醉管理的软件系统,它可以帮助医院和医生更好地管理手术麻醉过程,提高手术麻醉的质量和安全性。本文将介绍手术麻醉管理系统的实现、功能概述、主要功能、系统设置、麻醉管理、术中记录、苏醒室记录、PCA实施及管…

gRPC(Java) keepAlive机制研究

文章目录 结论Client端KeepAlive使用入口简要时序列表 Server端KeepAlive使用入口简要时序列表KeepAliveEnforcer 基于java gRPC 1.24.2 分析 结论 gRPC keepAlive是grpc框架在应用层面连接保活的一种措施。即当grpc连接上没有业务数据时,是否发送pingpong,以保持连…