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

元素的水平居中和垂直几种方案

总结一下各种元素的水平居中和垂直居中方案。

水平居中:

1.行内元素水平居中 text-align: center

定义行内内容(例如文字)如何相对它的块父元素对齐;不仅可以让文字水平居中,还可以让行内元素水平居中

注意:给行内元素的父元素设置

  • left:左对齐
  • right:右对齐
  • center:正中间显示
  •  justify:两端对齐

2.块级元素的水平居中  margin: 0 auto;

 设置当前块级元素(宽度): margin: 0 auto;

原理:一个块级元素默认独占一行,默认宽度是容器的宽度,margin-left,margin-right默认为0,若设置父元素的宽度为100px,本身的宽度是50px,则会自动设置该元素的margin-right为50px,即该元素的整体宽度仍然等于父元素的宽度。

当设置margin-left:auto,margin-right:auto,为了使该元素的宽度等于父容器的宽度,浏览器会使左右两侧的margin会平分剩余的宽度,所以会使该块级元素水平居中。

 3.绝对定位

    元素有宽度情况下, left0/right0/margin: 0 auto;

4.flex    justify-content: center

display:flex;
justify-content:center;

垂直居中:

  • 1.绝对定位

        * 元素有高度情况下, top0/bottom0/margin: auto 0;

<style>.container {position: relative;height: 300px;}.box1 {position: absolute;width: 100px;height: 100px;top: 0;bottom: 0;margin: auto 0;}
</style>
<div class="container"><div class="box1">我居中了</div>
</div>

 父元素height:300px,子元素height:100px,margin-top和margin-button会均分垂直方向剩余的距离。

 弊端:

     1>绝对定位会使元素脱离标准流,可能影响其他元素的布局

     2>必须给元素设置高度

  • 2. flex布局(直接使用flex)

<style>.container {display: flex;align-item:center;height: 300px;}.box1 {width: 100px;}
</style>
<div class="container"><div class="box1">我居中了</div>
</div>

    弊端:

      1> flex-container中的flex-item都会垂直居中

      2> 相对来说, 兼容性差一点点(基本可以忽略)

  • 3.相对定位+translate

  • 父元素设置高度,子元素可以不设置高度

  • 先向下移动父元素高度的一半

  • 在向上移动自身高度的一半

top:50%;transform: translate(0,-50%);

<style>.box1 {position: relative;top:50%;transform: translate(0,-50%);}
</style>
<div class="container"><div class="box1">我居中了</div>
</div>

思考:向下移动父元素高度的一半的时候为什么不适用margin-top:50% ?

margin的百分比是相对于包含块(父元素)的宽度。

4.文本垂直居中

line-height:两行文本base-line之间的距离,该距离正好等于一行的高度

当行高大于字体高度时,剩余的行距会上下均分,所以文字始终位于行高的中间,当设置行高等于容器的高度时,文字正好可以在容器中垂直居中。

注意:该方法只能用于文本,因为文本具有在行高中居中显示的特性

相关文章:

元素的水平居中和垂直几种方案

总结一下各种元素的水平居中和垂直居中方案。 水平居中&#xff1a; 1.行内元素水平居中 text-align: center 定义行内内容&#xff08;例如文字&#xff09;如何相对它的块父元素对齐;不仅可以让文字水平居中&#xff0c;还可以让行内元素水平居中 注意&#xff1a;给行内…...

JS和JQuery的区别

JS和jQuery都是用于前端开发的工具&#xff0c;但是它们有一些重要的区别。主要区别如下&#xff1a; JS是一种编程语言&#xff0c;而jQuery是一个JS库。JS可以与其他语言一起使用&#xff08;如PHP、Python等&#xff09;&#xff0c;而jQuery是JS的一个扩展&#xff0c;只能…...

延时摄影视频制作工具 LRTimelapse mac中文版特点介绍

lrTimelapse mac是一款适用于 Windows 和 macOS 系统的延时摄影视频制作软件&#xff0c;可以帮助用户创建高质量的延时摄影视频。该软件提供了直观的界面和丰富的功能&#xff0c;支持多种时间轴摄影工具和文件格式&#xff0c;并具有高度的可定制性和扩展性。 lrTimelapse ma…...

Mac电脑怎么运行 Office 办公软件

虽然 Office 软件也有 Mac 版本的&#xff0c;但是有蛮多小伙伴用起来还是感觉不得劲&#xff0c;毕竟接触了太久的 Windows&#xff0c;所以想要使用 Windows 版本的 Office 软件。 今天就给大家介绍一下怎么在 Mac 电脑中运行 Windows 版本的办公软件&#xff0c;在这里就需…...

FPGA 如何 固化程序到 FLASH中

1、导出Hardware 2、导出bit文件 3、打开SDK 4、 点击Ok 5、创建工程 6、 输入工程名称&#xff1a;guhua 7、选择 Zynq FSBL 8、单击 guhua、然后点击 build 点击&#xff1a;build all 9、 右键之后&#xff0c;点击&#xff1a;Creat Boot Image 10、点击 Cr…...

电源管理(PMIC)MAX20428ATIA/VY、MAX20428ATIC/VY、MAX20428ATIE/VY适合汽车ADAS应用的开关稳压器

一、概述 MAX20428是一款高效率、八路输出、低压PMIC。OUT1将输入电源升压至5V&#xff0c;电流高达500mA&#xff0c;而三个同步降压转换器的输入电压范围为3.0V至4.2V&#xff0c;输出电压范围为0.8V至3.9875V&#xff0c;峰值电流分别高达1.3A、1.3A和3.5A。三个300mA pMOS…...

十年JAVA搬砖路——Linux搭建Ldap服务器。

1.安装命令 yum -y install openldap compat-openldap openldap-clients openldap-servers openldap-servers-sql openldap-devel2.启动ldap systemctl start slapd systemctl enable slapd3.修改密码 slappasswd Aa123456获得返回的密码加密密码串&#xff1a; {SSHA}DkSw0…...

论文 辅助笔记:t2vec train.py

1 train 1.1 加载training和validation数据 def train(args):logging.basicConfig(filenameos.path.join(args.data, "training.log"), levellogging.INFO)设置了日志的基本配置。将日志信息保存到名为 "training.log" 的文件中日志的级别被设置为 INFO&…...

同时标注分割、检测、多分类属性的工具

1、 https://blog.csdn.net/minstyrain/article/details/82385580/ 2、 https://zhuanlan.zhihu.com/p/656703406...

LeetCode75——Day24

文章目录 一、题目二、题解 一、题目 2390. Removing Stars From a String You are given a string s, which contains stars *. In one operation, you can: Choose a star in s. Remove the closest non-star character to its left, as well as remove the star itself.…...

B端企业形象设计的正确姿势,你学会了吗?

如今&#xff0c;企业形象设计在B端市场中变得越来越重要。它是企业与客户之间建立联系的桥梁&#xff0c;也是吸引目标客户的重要方式。为了帮助您打造一个独特而专业的企业形象设计&#xff0c;我将为您提供十个步骤。 步骤1&#xff1a;了解企业定位和目标 在设计B端企业形…...

我在Vscode学OpenCV 基本的加法运算

根据上一篇我们可知__图像的属性 链接&#xff1a;《我在Vscode学OpenCV 处理图像》 属性— API 形状 img.shape 图像大小 img.size 数据类型 img.dtype  shape&#xff1a;如果是彩色图像&#xff0c;则返回包含行数、列数、通道数的数组&#xff1b;如果是二值图像或者灰度…...

数据结构与算法解析(C语言版)--线性表

本栏目致力于从0开始使用纯C语言将经典算法转换成能够直接上机运行的程序&#xff0c;以项目的形式详细描述数据存储结构、算法实现和程序运行过程。 参考书目如下&#xff1a; 《数据结构C语言版-严蔚敏》 《数据结构算法解析第2版-高一凡》 软件工具&#xff1a; dev-cpp 0…...

pthread 名字设置及线程标识符获取

pthread 名字设置及ID获取 pthread_setname_np 函数原型&#xff1a; int pthread_setname_np(pthread_t thread, const char *name);thread&#xff1a;要设置名称的线程标识符&#xff08;pthread_t&#xff09;。name&#xff1a;要设置的线程名称&#xff08;以字符串形式…...

17、Flink 之Table API: Table API 支持的操作(1)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…...

Ubuntu:解决PyCharm中不能输入中文或者输入一个中文解决方法

1.问题&#xff1a; Ubuntu22.04中&#xff0c;在pycharm里打字输入中文&#xff0c;每次都是只能输入第一个中文&#xff0c;后面输入的都变成了英文字母。。。无论咋调输入法&#xff0c;都没用&#xff0c;反正除了第一个字其他的输进去都是英文&#xff0c;而且汉字下面还…...

Vue3.0 reactive与ref :VCA模式

简介 Vue3 最大的一个变动应该就是推出了 CompositionAPI&#xff0c;可以说它受ReactHook 启发而来&#xff1b;它我们编写逻辑更灵活&#xff0c;便于提取公共逻辑&#xff0c;代码的复用率得到了提高&#xff0c;也不用再使用 mixin 担心命名冲突的问题。 ref 与 reactive…...

项目实战 | 使用Linux宝塔面板搭建商城公众号小程序基础框架

项目实战 | 使用Linux宝塔面板搭建商城公众号&小程序基础框架 1. 小程序/公众号运行的必备条件2. 准备阿里云ECS主机3. 宝塔面板基本配置4. 通过宝塔面板安装相关服务5. 新建站点并进行初始配置6. 服务配置6.1. PHP配置6.2. 数据库配置6.3. Redis配置6.4. 消息队列Supervis…...

IDEA远程调试代码

IDEA->RUN->Edit Configurations 端口随便选一个&#xff0c;选择调试模块&#xff0c;然后用IDEA生成的命令调试 java -agentlib:jdwptransportdt_socket,servery,suspendn,address*:8081 -jar backend-1.18.11.jar &...

目标检测 图像处理 计算机视觉 工业视觉

目标检测 图像处理 计算机视觉 工业视觉 工业表盘自动识别&#xff08;指针型和数值型&#xff09;智能水尺识别电梯中电动车识别&#xff0c;人数统计缺陷检测&#xff08;半导体&#xff0c;电子元器件等&#xff09;没带头盔检测基于dlib的人脸识别抽烟检测和睡岗检测/驾驶疲…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...