div span img对齐，垂直居中对齐问题

最新推荐文章于 2024-12-06 20:32:51 发布

转载最新推荐文章于 2024-12-06 20:32:51 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuxiaoyu/p/11255099.html

文章标签：

#javascript #前端 #ViewUI

本文探讨了在前端开发中常见的文字与图片无法平齐的问题，并介绍了如何使用CSS的vertical-align属性来实现元素的垂直居中对齐。通过实例展示了不同属性值的效果，包括如何给div设置line-height属性以进一步优化对齐。

我想你们在前端开发中或多或少都遇到过这种问题，文字和图片不能平齐，很是头疼。

HTML代码：

<div class="">小太阳<span>小太阳</span><img src="img/考拉.jpeg" style="width: 24px;height: 24px;" alt=""></div>

介绍一个css属性：vertical-align

默认值是baseline。

当我们给 span 和 img 都加上 vertical-align: middle ; 会怎样尼？

<div class="" style="">小太阳<span style="vertical-align:middle">小太阳</span><img src="img/考拉.jpeg" style="width: 24px;height: 24px;vertical-align:middle" alt=""></div>

发现第一个“小太阳”没对齐，当然是给 div 也加上vertical-align: middle ;

其属性值及解析如下：

baseline：将支持valign特性的对象的内容与基线对齐

sub：垂直对齐文本的下标

super：垂直对齐文本的上标

top：将支持valign特性的对象的内容与对象顶端对齐

text-top：将支持valign特性的对象的文本与对象顶端对齐

middle：将支持valign特性的对象的内容与对象中部对齐

bottom：将支持valign特性的对象的文本与对象底端对齐

text-bottom：将支持valign特性的对象的文本与对象底端对齐

给div 设置行高line-height属性

line-height值改得和DIV或者SPAN的height相同！

转载于:https://www.cnblogs.com/xuxiaoyu/p/11255099.html