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

devtools/2024/11/15 0:50:51/

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

使用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.ppmy.cn/devtools/28859.html

相关文章

美国国防部数据网格参考架构概述(下)

文章目录 前言四、行动者与角色五、基线服务与服务模式六、用例演示前言 DRMA从多个角度研究了CDAO数据网格的架构,以深入了解该网格将如何支持美国防部无缝访问联合数据、分析和基础设施以实现数字化转型和人工智能(AI)需求。它提供了一种战略性、原则性和技术性方法,通过…

vivado Versal 串行 I/O 硬件调试流程、使用 Vivado Serial I/O Analyzer 来调试设计

Versal 串行 I/O 硬件调试流程 Versal ™ ACAP 无需再生成 IBERT IP &#xff0c; 因为使用系统内串行 I/O 调试所需的必要逻辑现已集成到 GTY 收发器架构内。使 用 GTY 收发器的任何设计均可用于串行 I/O 硬件调试。 Versal 串行 I/O 硬件调试流程具有 2 个不同阶…

套接字概念的理解

1.概念 套接字&#xff08;Socket&#xff09;是网络编程中的一个基本概念&#xff0c;它提供了一种机制&#xff0c;使得一台计算机上的应用程序能够与另一台计算机上的应用程序进行通信。在网络通信中&#xff0c;套接字充当了通信端点的角色&#xff0c;它使得不同主机之间…

Docker-容器的前世今生

文章目录 Docker为什么产生&#xff1f;硬件虚拟化硬件虚拟化解决的问题硬件虚拟化定义硬件虚拟化技术虚拟机的优点虚拟机的缺点 操作系统虚拟化即容器容器化解决的问题容器化定义容器化技术历史 容器和虚拟机对比 Docker的发展历史Docker架构客户端服务端仓库Registry Docker重…

文献阅读:SPACEL:基于深度学习的空间转录组结构表征

文献介绍 「文献题目」 SPACEL: deep learning-based characterization of spatial transcriptome architectures 「研究团队」 瞿昆&#xff08;中国科学技术大学&#xff09; 「发表时间」 2023-11-22 「发表期刊」 Nature Communications 「影响因子」 16.6 「DOI」 10.…

浅谈OpenCV 粗略计算工件轮廓面积和外接圆直径(Emgu.CV)

前言 最近领导在做库房工具管理这块的功能&#xff0c;希望能集成OpenCV 粗略的计算出工具的长度&#xff0c;以方便用户再归还工具的时候&#xff0c;提示用户该放在那种尺寸的盒子里面&#xff0c;这便是这篇文章的由来。 我们的系统是基于.net开发的&#xff0c;所以采用的是…

HTML_CSS学习:CSS像素与颜色

一、像素 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>像素</title> </head><style>.atguigu1{/*单位可以是cm&#xff0c;但不能是m,dm*/width: 1cm;height: 1cm;background-c…

《与 Apollo 共创生态——Apollo7周年大会干货分享》

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” 文章目录 阿波罗X企业自动驾驶解决方案自动驾驶技术提升与挑战自动驾驶系统功能与性能的详细解析<td alig…