CSS中不固定大小的图片怎样做到在所在的块元素里垂直居中

对于不固定大小的图片,在块元素中实现垂直居中可以有多种方法。以下是一些常用的方法:

使用Flexbox(弹性盒子):

Flexbox 是一个非常强大的布局工具,可以轻松实现元素的垂直居中。你只需要将块元素设置为 flex 容器,并使用 align-items: center; 来实现垂直居中。

html

<div style="display: flex; align-items: center; height: 200px;">

    <img src="your-image.jpg" alt="Your Image">

</div>

这里,display: flex; 将块元素转换为 flex 容器,align-items: center; 则使容器内的元素垂直居中。

2. 使用定位和 transform:

你也可以使用定位和 transform 属性来实现垂直居中。这种方法需要设置图片的定位为绝对定位,并使用 top: 50%; 将图片的顶部设置为块元素的一半高度。然后,使用 transform: translateY(-50%); 将图片向上移动其自身高度的一半,从而实现垂直居中。);` 将图片向上移动其自身高度的一半,从而实现垂直居中。

html

<div style="position: relative; height: 200px;">

    <img class="_double-img_oyf7t_72" src="your-image.jpg" alt="Your Image" style="position: absolute; top: 50%; transform: translateY(-50%);">

</div>

使用表格布局:

尽管现代网页设计中很少使用表格布局,但它仍然是一个有效的解决方案。你可以将块元素设置为 display: table-cell;,并使用 vertical-align: middle; 来实现垂直居中。

html

<div style="display: table-cell; vertical-align: middle; height: 200px;">

    <img class="_double-img_oyf7t_72" src="your-image.jpg" alt="Your Image">

</div>

使用 CSS Grid:

CSS Grid 也是一个强大的布局系统,可以实现复杂的布局,包括垂直居中。你可以使用 align-items: center; 在 grid 容器中实现垂直居中。现复杂的布局,包括垂直居中。你可以使用 align-items: center; 在 grid 容器中实现垂直居中。

html

<div style="display: grid; align-items: center; height: 200px;">

    <img class="_double-img_oyf7t_72 _four-img_oyf7t_379" src="your-image.jpg" alt="Your Image">

</div>

 

每种方法都有其优缺点,你可以根据你的具体需求和上下文选择最适合的方法。例如,Flexbox 和 CSS Grid 是现代布局的首选方法,但它们可能在一些老旧的浏览器中不受支持。而表格布局和定位和 transform 的方法虽然兼容性较好,但可能不如前两者灵活和强大。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/581885.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-6.5, 汇编 led.s,第一次点亮LED灯

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

Llama 3 安装使用方法

Llama3简介&#xff1a; llama3是一种自回归语言模型&#xff0c;采用了transformer架构&#xff0c;目前开源了8b和70b参数的预训练和指令微调模型&#xff0c;400b正在训练中&#xff0c;性能非常强悍&#xff0c;并且在15万亿个标记的公开数据进行了预训练&#xff0c;比ll…

读天才与算法:人脑与AI的数学思维笔记13_Coq证明助手

1. 计算机 1.1. 对于计算机来说&#xff0c;它就很擅长处理这种重复而机械且计算量庞大的任务 1.1.1. 在速度与准确性等方面&#xff0c;计算机是远超过手工计算的 1.2. 计算机只能执行指令&#xff0c;并无自主创造力 1.2.1. 想…

JavaScript 的基本术语大全

文章目录 1、概述2、基本术语2.1、有效负载 (Payload)2.2、ReadableStream2.3、模块系统2.4、DOM (Document Object Model)2.5、事件 (Events)2.6、活动委托 (Event Delegation)2.7、内容安全策略 (CSP)2.8、渐进增强和优雅降级2.9、JSON (JavaScript Object Notation)2.10、AJ…

绝地求生:竞技比赛RP占比改动详解

大好&#xff0c;我闲游盒&#xff01; 在上周29.1版本更新后&#xff0c;官方也发布了关于竞技比赛&#xff1a;RP的改动公告&#xff0c;这里就为大家简单讲解一下具体改动的地方~ 官方希望能够通过优化让RP、段位和竞技比赛更能准确的反馈出大家自身的实力。 第一项改动是在…

02.Kafka部署安装

1 Linux 安装 Kafka 1.1 安装前的环境准备 由于 Kafka 是用 Scala 语言开发的&#xff0c;运行在 JVM 上&#xff0c;因此在安装Kafka之前需要先安装JDK。 yum install java-1.8.0-openjdk* -y kafka 依赖 zookeeper&#xff0c;所以需要先安装 zookeeper。 wget https://ar…

5G图标显示分析

1、问题现象 MTK平台项目中出现一个5G图标显示问题&#xff0c;注册5G时&#xff0c;拨打电话&#xff0c;对比机图标显示回落到4G&#xff0c;测试机一直显示5G。 2、原因分析 2.1、NSA显示规则 根据GSMA协议&#xff0c;NSA架构下5G图标显示有如下4种. 2.2、Android中显示5G…

基于Springboot的甘肃旅游服务平台(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的甘肃旅游服务平台&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构…

idea的插件,反编译整个jar包

idea的插件&#xff0c;反编译整个jar包 1.安装插件1.1找到插件1.2 搜索插件 2.反编译整个jar包2.1 复制jar包到工件目录下&#xff1a;2.2 选中jar包&#xff0c;点出右键 3.不用插件&#xff0c;手动查看某一个java类3.1 选中jar包&#xff0c;点出右键 1.安装插件 1.1找到插…

日本宇宙航空研究“Int-Ball2”自由飞行相机机器人采用的Epson IMU

IMU有助于飞行的稳定控制和电池充电的自动对接- 精工爱普生公司&#xff08;TSE:6724&#xff0c;“Epson”&#xff09;很高兴地宣布&#xff0c;日本宇宙航空研究开发机构&#xff08;JAXA&#xff09;选择了爱普生M-G370系列的惯性测量单元&#xff08;IMU&#xff09;&…

Spring Security介绍(三)过滤器(2)自定义

除了使用security自带的过滤器链&#xff0c;我们还可以自定义过滤器拦截器。 下面看下自定义的和security自带的执行顺序。 一、总结 1、自定义过滤器&#xff1a; 一般自定义fliter都是&#xff1a; import lombok.extern.slf4j.Slf4j; import org.springframework.ster…

0418EmpTomCat项目 初次使用ajax实现局部动态离职

0418EmpTomCat项目包-CSDN博客 数据库字段&#xff1a; 员工部门表 分页查询&#xff1b; 多条件查询&#xff1b; 添加新员工&#xff1b; ajax点击离职操作效果&#xff1a;

R-Tree: 原理及实现代码

文章目录 R-Tree: 原理及实现代码1. R-Tree 原理1.1 R-Tree 概述1.2 R-Tree 结构1.3 R-Tree 插入与查询 2. R-Tree 实现代码示例&#xff08;Python&#xff09;结语 R-Tree: 原理及实现代码 R-Tree 是一种用于管理多维空间数据的数据结构&#xff0c;常用于数据库系统和地理信…

使用FPGA发送一个经过曼彻斯特编码的伪随机序列

介绍 这几天突然就不知道要使用FPGA实现什么样的功能了,然后就跑去学习数电了,学的也是晕晕的。正好之前写了一个使用FPGA发送伪随机序列的代码,然后因为需要使用曼彻斯特编码,所以又加了一个模块吧,使得最后输出的波形经过曼彻斯特编码。 曼彻斯特编码 首先,曼彻斯特编…

Spark-机器学习(7)分类学习之决策树

在之前的文章中&#xff0c;我们学习了分类学习之支持向量机&#xff0c;并带来简单案例&#xff0c;学习用法。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。…

C语言——栈的实现

栈&#xff08;Stack&#xff09;是一种基于先进后出&#xff08;LIFO&#xff09;原则的数据结构&#xff0c;类似于我们平常堆放书籍或者盘子的方式。 栈通常是从高地址向低地址增长的&#xff0c;也就是说&#xff0c;栈顶位于较高的内存地址&#xff0c;而栈底位于较低的内…

初始计算机网络

TCP/IP TCP/IP模型 TCP/IP网络模型&#xff1a;对于不同设备之间的通信&#xff0c;就需要网络通信&#xff0c;而设备是多样性的&#xff0c;所以要兼容多种多样的设备&#xff0c;就协商出了一套通用的网络协议。 TCP/IP分层 这个网络协议是分层的&#xff0c;每一层都有…

PyVista 3D数据可视化 Python 库 简介

Pyvista是一个用于科学可视化和分析的Python库 &#xff1b;我认为它适合做一些网格数据的处理&#xff1b; 它封装了VTK&#xff08;Visualization Toolkit&#xff09;之上&#xff0c;提供了一些高级接口&#xff0c; 3D数据可视化变得更加简单和易用。 1.安装 pyvista&…

【Qt】控件的核心属性

1 &#x1f351;控件概述&#x1f351; Widget 是 Qt 中的核⼼概念. 英⽂原义是 “⼩部件”, 我们此处也把它翻译为 “控件” .控件是构成⼀个图形化界⾯的基本要素。 Qt 作为⼀个成熟的 GUI 开发框架, 内置了⼤量的常⽤控件。这⼀点在 Qt Designer 中就可以看到端倪&#xf…

装饰器模式、代理模式、适配器模式对比

装饰器模式、代理模式和适配器模式都是结构型设计模式&#xff0c;它们的主要目标都是将将类或对象按某种布局组成更大的结构&#xff0c;使得程序结构更加清晰。这里将装饰器模式、代理模式和适配器模式进行比较&#xff0c;主要是因为三个设计模式的类图结构相似度较高、且功…