移动端重构图片文字的水平垂直居中

移动端重构的时候,常见图文居中分两种,一种是这样图片跟文字呈上下结构的

这种比较简单,在这里就不详细说了。

今天群里有人问到了另外一种的,类似这样的,图片与文字呈左右结构的,并且图文水平垂直居中

大致意思就是,图片跟文字是左右结构,图片可以根据屏幕大小变化,右边文字有可能一行,有可能多行,都要求在那个方框里面垂直居中。并且图片跟文字整体在方框里面也是水平垂直居中的。甚至那个方框的高都不是固定的。

正好自己前些天也碰到这问题,当时赶项目做得有点粗糙,今天重新写写。

上次那项目做的- -要是万一文字变多了,我那里又得改一些padding之类的值,现在不用担心了。

时间: 2024-12-21 18:53:31

移动端重构图片文字的水平垂直居中的相关文章

转 图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示.关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法.淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签:需要记住一些比例参数,上手较难:原理艰深,兼容性不稳定等.但是在我看

大小不固定的图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示. 关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法.淘宝团队似乎提供了一种不错的方法, 用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额 外标签:需要记住一些比例参数,上手较难:原理艰深,兼容性不稳定等.但是

table-cell实现未知宽高图片,文本水平垂直居中在div

<BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-outer"> <div class="box"> <img src="images/01.jpg" /> </div> </div> <!--box-outer--> <h1>多行文

图片和span水平垂直居中

<style type="text/css"> .content{ width:20%; height:60px; border:1px solid red; text-align:center;} span{ height:100%; vertical-align:middle; line-height:60px;} img{ vertical-align:middle;} </style> <div class="content"&

CSS制作图片水平垂直居中 亲测推荐

空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主要使用了一张宽度为1px高度为100%的透明图片,并设置图片“vertical-align:middle”.后来我想了想,此处能不能不使用图片,直接像上面的实例一样,用一个空格的span标签,只是将其“display:inline”设置为“display:inline-block”.因为这两者的核心原理都是一

不设置行高,文字水平垂直居中显示

利用display:table-cell; 表格 <body> <div class="box">爆款推荐</div> <br/> <div class="box">满199减20</div> <br/> <div class="box">满赠</div> </body> .box { width:60px; height:60

如何让高度自适应的div中的文字水平垂直居中

1.在做数据展示的时候,因为后台没有数据,为了提示用户没有数据,自己手写了一个div中间显示一个"暂无数据的字样", 然后控制显示和隐藏,这样方法有两种: 第一种:设置display隐藏,但有一个问题,因为我的div中用了display:table-cell,所以起了冲突, 第二种:更改z-index的值 不显示的时候设置0,显示的时候设置最大值就行(推荐使用) 本文主要是探讨,因为外层的div的宽度和高度是不固定,导致了文字不能水平垂直居中的问题,解决办法: #big{ width:

电脑端怎样具体操作图片文字识别?

办公室职员最离不开的就是电脑了,那么大家平时会不会操作图片文字间的转换呢?并且是电脑端的图片文字识别.如果不会的话,可以看看今天小编的分享哈. 图片转文字的具体操作: 第一步:打开OCR文字识别软件,在运行OCR文字识别软件时,在软件页面内左侧功能栏里有图片文字识别.图片转文字.票证识别.图片局部识别.语音识别.语音转文字.截图识别功能. 第二步:选择我们需要的功能进行识别,如极速识别,先添加文件可进行识别.我们的文件可能在桌面上也能在其他地方,添加文件的时候一定要仔细. 第三步:选择好添加的文

CSS制作水平垂直居中对齐 多种方式各有千秋

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对 于我这样的初学者有一定的帮助. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足