行内元素图片默认顶对齐,文字是底对齐

Posted qianphong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了行内元素图片默认顶对齐,文字是底对齐相关的知识,希望对你有一定的参考价值。

文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐。

默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐,接下来为大家详细介绍下设置各对象的vertical-align属性,感兴趣的朋友可以参考下哈

 

文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐。 

设置各对象的vertical-align属性,属性说明: 

baseline-将支持valign特性的对象的内容与基线对齐 
sub-垂直对齐文本的下标 
super-垂直对齐文本的上标 
top-将支持valign特性的对象的内容与对象顶端对齐 
text-top-将支持valign特性的对象的文本与对象顶端对齐 
middle-将支持valign特性的对象的内容与对象中部对齐 
bottom-将支持valign特性的对象的文本与对象底端对齐 
text-bottom-将支持valign特性的对象的文本与对象顶端对齐 

在此设置为text-bottom即可实现图片与文字位于同一水平线上,好看多了 
如下:其他自己改 

复制代码
代码如下:

<span style="width:120px;"><img src="/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>目标任务</span>


实现图片于文字的底端对齐

最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~

可是当我在中间的span写上文字的时候,神奇的事情发生了:

技术图片

是的,写上字的那个span掉下来了,掉落,排版错位,很恶心的东西!使用Chrome的开发者工具查看,css和盒模型没有半点问题,郁闷中……

仔细观察发现,掉落的高度貌似跟文字的高度差不多,试了下,如果把文字字体加大,发现变成这样了:

技术图片

是的,有文字span向上移动了一些!也就是说,掉落的那个、有文字的span的掉落程度跟它上面的文字的大小有关系,文字的大小代表什么?大号文字的重心明显比小号文字的重心高,于是把字体改回原来的样子,然后试着使用vertical-align直接修改文字的重心位置为:

 vertical-aligntop  

 得到这样的结果:

技术图片

成功了!有文字的span跟没有文字的span对齐啦!

 原因:

很明显是vertical-align设置错误的问题,谷歌了下vertical-align的用法,找到如下链接:

 

CSS属性Vertical Align使用方法讲解  

  •   
  • http://www.jzxue.com/wangyesheji/css/201006/11-3937.html  

 

大体意思是,vertical-align只用在display属性inline或inline-block的情况下才能使用,默认为baseline,就是“display属性inline或inline-block”的控件的底端跟文字的baseline(基线)对齐:

技术图片

所以,在设置vertical-align之前,左右两个没有文字的span的底端跟中间那个有文字的span里的文字的基线对齐了,所以中间那个span就下降了文字高度的尺寸。而改变文字的尺寸后,基线随之被提高,然后中间有文字的那个span也就跟着上去了。设置vertical-align:top后,左右两边的span的top跟中间span的top对齐,问题解决了~

默认的baseline是文字的底端,bottom是包文字的容器的底端。

 

移除空格的方法

元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:

<div class="space">
    <a href="##">
    惆怅</a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>

或者是:

<div class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
</div>

或者是借助HTML注释:

<div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

或者直接可以用float来解决。



















以上是关于行内元素图片默认顶对齐,文字是底对齐的主要内容,如果未能解决你的问题,请参考以下文章

css中让文字和图片对齐的问题

HTML-CSS:vertical-align属性

三十四vertical-align属性应用

CSS学习31-vertical-align属性应用

前端文字与图片的对齐

图片标记 : 行内元素 单边标记