如何让文字在图片上垂直居中

最新推荐文章于 2023-08-25 14:28:52 发布
最新推荐文章于 2023-08-25 14:28:52 发布
阅读量652 收藏 1
点赞数 1
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hong521520/article/details/116706694
版权
通过设置图片外的父元素相对定位，再将包含文字的盒子绝对定位，上下左右设为0，并利用flex布局，可以实现文字在图片上的垂直居中效果，确保在不同尺寸屏幕上都能适配。
摘要由CSDN通过智能技术生成

在这里插入图片描述
实现思路:

  • 给图片外面的父盒子相对定位
  • 给两行文字的父盒子绝对定位,上下左右都为0,通过flex布局来使文字垂直居中,适配大小屏幕
<div class="card-default-top">
    <img src="./static/images/price/price-bzn.png"
最低0.47元/天 解锁文章
一个橙子呀
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS设置文字图片垂直居中的方法总结
12-02
总结，本文提供的CSS设置文字图片垂直居中的方法是一种简单实用的技巧，它利用了`display:inline-block`和`vertical-align:middle`的组合，以及辅助元素来达到目的。这种方法对于静态布局尤为适用，可以很好地满足...
CSS图片文字垂直居中对齐
bestyinjun的专栏
07-17 1391
CSS图片文字垂直居中对齐
CSS常见图片居中，文字居中，版心居中集合
m0_54088431的博客
06-09 8626
1.margin:0 auto；（水平居中）2.margin: auto;（垂直水平居中）3. 定位居中（垂直水平）适用于未知宽高，已知高度也可以用4.text-align水平居中，主要使用：文字居中5.行高line-height垂直居中，适用于：文本6.Flex居中(垂直水平居中)7.width:fit-content; (水平居中)设置width:fit-content;同时设置margin：auto；实现元素居中；8.margin-top（垂直水平居中）9.vertical-align:middle.
css图片居中
m0_45218136的博客
09-18 7270
css图片水平垂直居中
CSS 中实现文字和图片的垂直居中
最新发布
YKPkaiping的专栏
08-25 1275
1. 使用 Flexbox 布局.container使用 Flexbox 布局，并通过实现垂直居中。则实现水平居中。你可以根据需要调整.container的高度。
图片与文字垂直居中的方法
Min_137的博客
09-15 4158
如何实现图片与文字水平垂直对齐
css实现文字图片垂直居中效果
09-25
在CSS中，实现文字与图片的垂直居中效果是一种常见的页面布局需求，尤其是在创建网页内容时，通常需要对元素进行精确的定位。在提供的示例代码中，展现了多种方法来实现垂直居中，下面将详细解释这些技术的细节。 ...
jquery.valign插件实现图片,文字上下左右垂直居中
06-10
今天特意在网上找到了一款插件--jquery.valign，可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果，使用方法： 1、调用jquery库以及本插件 2、jquery方法调用，如本案例第22、23行 使用说明：  外侧...
图片文字上下左右垂直居中
06-04
"图片文字上下左右垂直居中"是一个常见的需求，尤其在设计响应式网页或者创建简洁布局时。这个主题涉及到CSS（层叠样式表）的布局技巧，特别是定位和对齐方式。下面我们将深入探讨如何实现这种效果，并结合提供的...
css 使用小技巧
wangkangyang的博客
02-21 8084
css 使用小技巧
16种CSS水平垂直居中方法
weixin_45709829的博客
03-22 3万+
16种css水平垂直居中方法以及应用（文字、图片） 一、垂直居中 1、行内元素 基本思想：单行文本子元素line-height 值为父元素 height 值 .parent { height: 200px; } .son { line-height: 200px; } 2、块级元素 2.1行内块级元素 基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器中央 兼容性：支持IE7 .parent::afte
CSS实现图片与文本的居中对齐的常见方式
zxl_start的博客
02-02 7218
CSS实现图片与文本的居中对齐的常见方式
图片和文字同行垂直居中、对齐问题
昔冰_G的博客
09-20 3644
图片和文本垂直居中显示；消除图片下面的空隙；消除空白节点；
CSS简单的图片居中
热门推荐
unsleepfish的博客
05-15 4万+
图片的居中显示 css 有很多方法，但在很多情况下有的方法无效，这是件很头疼的事情，比如 一般设置图片属性 ​text-align:center ​ 水平居中，但这个方法经常无效，很多前端工程师都有研究过或者说是搜索过 CSS 图片居中方法吧。 但其实CSS 图片居中有多种不同的情况，也有多种不同的解决方法，具体方法如下所示： 图片居中又分为水平居中和垂直居中 提示：在你开始阅读以下内容之前，你可以先了解CSS图片的基础内容。 一、水平居中： 1、单独文字垂直居中我们只需要设置 CSS
设置图片元素上下垂直居中的7种css样式_赵一鸣博客
没做过产品的后端不是个好前端
11-09 4327
设置图片元素上下垂直居中的7种css样式 阅读(9548) @2018-07-15 14:13:34 图片、文字左右居中很简单，只需要以下代码： 1 text-align:center; 文字上下居中也很简单，假设外部div元素的高度是100px，那么： 1 line-height:100px; line-height不适用于图片...
css文字和图片居中
xx820702的博客
08-09 414
css文字和图片居中
css+div 图片文字垂直居中问题 （转）
qq550685760的专栏
02-01 387
在div+css制作网页中，经常会出现div或者li中文字底部或者顶部对齐无法居中的问题，设置了vertical-align=middle（垂直对齐）仍然无法实现。这是因为vertical-align适用于in-line和table-cell，对于div，li，p等块级元素是不生效的。原理是这个原理，使用中太多情况会需要垂直居中，其中解决办法很简单，下面针对常见的两种情况进行说明，以li为例，di
css技巧之文字与图片居中对齐
qq_56992860的博客
08-01 2650
实现思路通过flex布局实现图片与文字水平对齐。
图文混排时，图片和文字垂直如何居中
qinduan007的博客
03-26 1404
图文混排时，图片和文字垂直如何居中 首先我们来说一说line-height和vertical:middle的区别 line-height：行高，可以使标签内部一行的内容进行垂直对齐 vertical：middle ：vertical-align:针对行内元素和行内块元素进行居中，设置vertical-align：middle，可以理解为对齐的基线是按照某个中线为基线，实现图片和文字，图片和图片等行内或行内块元素间的居中，但是实际上并未在一行中垂直居中，因为该属性设置是实现一行 内元素间的对齐 总结：也就是
css图片文字垂直居中
04-02
可以使用flex布局来实现图片和文字的垂直居中： HTML代码： ```html <div class="container"> <img src="image.jpg" alt="image"> <p>text</p> </div> ``` CSS代码： ```css .container { display: flex; align-items: center; /* 垂直居中 */ } .container img { margin-right: 10px; } ``` 上面的代码将图片和文字包装在一个容器中，并将容器设置为flex布局。通过`align-items: center`将容器中的元素垂直居中。如果需要让图片和文字之间有一定的间距，可以给图片添加一个右边距。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值