1、图片和文字内容（不设置对齐方式）

<style>.wrap2 {width: 500px;margin: 50px auto;background: coral;}.wrap2 img {width: 100px;}
</style><div class="wrap2"><img src="./cat.jpg" alt="" /><span>xibing</span>
</div>

该情况下，内容和图片呈基线对齐——字母x的下边

文本内容增多后：

2、图片和文字内容（设置垂直居中对齐）父级高度不固定

<style>.wrap2 {width: 500px;margin: 50px auto;background: coral;}.wrap2 img {width: 100px;/*只给图片设置*/vertical-align: middle;}
</style><div class="wrap2"><img src="./cat.jpg" alt="" /><span>xibing</span>
</div>

文本内容增多后：

让多行文本内容都呈现垂直居中，可以给文本设置【宽度+vertical-align:middle】

其中宽度+图片宽度<父级宽度即可（给span设置宽度避免不了给它设置转行内块）

<style>.wrap2 {width: 500px;margin: 50px auto;background: coral;}.wrap2 img {width: 100px;vertical-align: middle;}.wrap2 span{display: inline-block;width: 380px;vertical-align: middle;border: 1px dashed #fff;}
</style><div class="wrap2"><img src="./cat.jpg" alt="" /><span>xibing xibing xibing xibing xibing xibing xibing xibing xibing</span>
</div>

这里还有个有趣的地方，现在咱们的词之间有距离，如果各个贴合就不会换行

为了避免这种情况，我们可以加上【超出换行overflow-wrap: anywhere;】

<style>.wrap2 {width: 500px;margin: 50px auto;background: coral;}.wrap2 img {width: 100px;vertical-align: middle;}.wrap2 span{display: inline-block;width: 380px;vertical-align: middle;border: 1px dashed #fff;overflow-wrap: anywhere;}
</style><div class="wrap2"><img src="./cat.jpg" alt="" /><span>xibingxibingxibingxibingxibingxibingxibingxibingxibing</span>
</div>

3、图片和文字内容（设置垂直居中对齐）父级高度固定

可以设置父级：行高等于高来实现内部子元素垂直居中对齐

<style>.wrap2 {width: 500px;height:200px;/*行高等于高---让内部元素垂直居中*/line-height:200px;margin: 50px auto;background: coral;}.wrap2 img {width: 100px;vertical-align: middle;}.wrap2 span{display: inline-block;width: 380px;vertical-align: middle;border: 1px dashed #fff;overflow-wrap: anywhere;}
</style><div class="wrap2"><img src="./cat.jpg" alt="" /><span>xibing</span>
</div>

如果是单行文本，不会换行，则按照父级的行高会垂直方向居中对齐
But,如果是多行文本，还想要垂直居中对齐，就得给再设置一下自己文本的行高，以覆盖继承的父级行高，实现自己管理管理自己行高

.wrap2 span{display: inline-block;border: 1px dashed #fff;width: 380px;/*设置行高，以控制自己内部文本内容的行高*/line-height: 42px;overflow-wrap: anywhere;vertical-align: middle;
}

4、图片/文字和父级底部间隔问题

看了几篇文章，解决方案是处理vertical-align或line-height

处理vertical-align：

内联元素的vertical-align默认是baseline，基线对齐；让vertical-align:baseline失效即可！

方法1：将内联元素转换为块元素，vertical-align对块级元素不生效（display: block;）

方法2：不使用默认的基线对齐方式（vertical-align: bottom/middle/top;）

对于文字底部的距离可以处理line-height：

将父级的line-height调小即可解决该问题

<style>.wrap2 {width: 500px;/*给父级把行高调小*/line-height:12px;margin: 50px auto;background: coral;}.wrap2 img {width: 100px;vertical-align: bottom;}.wrap2 span{display: inline-block;width: 380px;border: 1px dashed #fff;}
</style><div class="wrap2"><img src="./cat.jpg" alt="" /><span>xibingxibingxibingxibing</span>
</div>

我们还会注意到一个空隙——图片和文字之间的空隙：

解决办法：

方法一：让实际代码中的img标签和span标签紧贴；

<div class="wrap2"><img src="./cat.jpg" alt="" /><span>xibingxibingxibingxibing</span>
</div>

方法二：父级font-size:0

<style>.wrap2 {width: 500px;/*给父级把行高调小*/line-height:12px;margin: 50px auto;background: coral;/*设置font-size:0来让空字符隐藏不占位*/font-size:0px;}.wrap2 img {width: 100px;vertical-align: bottom;}.wrap2 span{display: inline-block;width: 380px;border: 1px dashed #fff;/*避免继承父级font-size为0的影响，这里要给一个字体大小才能让文本显示*/font-size:16px;}
</style><div class="wrap2"><img src="./cat.jpg" alt="" /><span>xibingxibingxibingxibing</span>
</div>

图片和文字同行垂直居中、对齐问题相关推荐

微信小程序图片文字水平垂直居中对齐
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站微信小程序图片文字水平垂直居中对齐要实现水平垂直居中可使用如下方案给父元素设置 .td {dis ...
设置图片和文字的垂直居中
设置图片和文字的垂直居中.vertical-align:middle;图片竖向居中,然后文字就可以和图片对齐.
仿抖音短视频APP源码html网页图片和文字水平居中垂直居中显示
div相对于页面水平居中显示: 核心代码:margin:0 auto: /意思为:div的外边距上下为0px,左右居中显示;/ /前提是position为相对定位;不能为absolute绝对定位/ * ...
html网页图片和文字水平居中垂直居中显示
关注公众号:"奇叔码技术" 回复:"java面试题大全"或者"java面试题" 即可免费领取资料下面代码一致:示例自己做的网站效果示例 ...
div内图片和文字水平垂直居中
大小不固定的图片.多行文字的水平垂直居中本文综述想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实 ...
图片和文字同行对齐方式
align="absmiddle" AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐. AbsMiddle 图像的中间与同一行中最大元素的中间对齐. Baseline ...
jsp文字上下居中显示_表单元素input、按钮、文字完美垂直居中对齐方法
本文最终总结出来办法就是要对齐的表单内容(含文字.图片.表单各种元素.label)字体设置为Tahoma,则可以完美的实现对齐(Verdana等字体也可以),其中个别的input元素如radio的pa ...
微信小程序文字水平垂直居中对齐问题（完美解决方案）
我们知道常用的居中对齐方式有很多种例如: text-align:center; align-items:center; justify-content: center; margin: auto; # ...
CSS：一行上不同大小的文字上下垂直居中对齐
关键代码 /* 每个子元素增加对齐属性 */.middle {vertical-align: middle; } 完整代码 <style>body {height: 100vh;displ ...

图片和文字同行垂直居中、对齐问题

1、图片和文字内容（不设置对齐方式）

2、图片和文字内容（设置垂直居中对齐）父级高度不固定

3、图片和文字内容（设置垂直居中对齐）父级高度固定

4、图片/文字和父级底部间隔问题

图片和文字同行垂直居中、对齐问题相关推荐

最新文章

热门文章