2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

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

前端原创css作者:被遗忘De角落

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

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相同!

本文来源于网络:查看 >
评论
点击刷新
评论
×添加代码片段