A-A+

display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法

2015年08月21日 htmlcss 暂无评论 阅读 228 次

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

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

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

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

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

vertical-align:top

得到这样的结果:

成功了!有文字的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对齐,问题解决了~

示例代码

顺带转载那篇文章吧~

CSS有一个属性叫Vertical Align。当你第一次学习它的时候会有些困惑,因此我觉得我们可以通过它的用法来了解它。最基本的用法像这样:

img{
vertical-align: middle;
}

注意在这个应用案例中,它被应用到了img元素上。图片通常是行内元素,意味着它通常是和文字在一起的。但是到底”在一起”确切的是什么意思?这就是Vertical-align所要解决的。

有效值为:baseline,sub,super,top,text-top,middle,bottom,text-bottom,length或者百分比值。

我认为最让人使人困惑的是,当大家尝试着给块级元素使用vertical-align时,却得不到任何结果。如果你有一个大一些div,其中包含一个小的div,你希望小的能够在大的之内垂直居中对其,vertical-align没法帮到你。Douglas Heriot有好方法来实现这种效果。

Baseline

vertical-align默认的值就是baseline(如果你没有做任何声明的话)。图片会和文字以文字基线为准对其。注意下行字母降到了基线以下。图片不会和下行字母的最下端对齐,那不是基线。

Middle

也许vertical-align的最常用的用法是给图标大小的图片设置为”middle”。结果有着跨浏览器的一致性。

浏览器能够让文字和图片精确的对齐:

要小心如果图片比当前文字和行高要大的话,在需要的时候它会将下面的线条向下推:

Text-bottom

和基线不同,它是文字的底端,是下行文字靠近的方向。图片也可以很好的和它对齐。

 

Text-top

和text-bottom相反的就是text-top,当前文字的最高点。你也可以依次对齐。注意下面的文字,Georgia字体,最上端要比图片高出一点。

Top和Bottom

Top和Bottom类似于text-top和text-bottom,但是他们不受文字的限制,依赖于所在行的所有东西(比如另外一张图片)。因此如果一行有两张图片,不同的高度,而且都要比所在行的文字大,它们的顶端(或者底端)就会对齐,而不理会文字的大小。

Sub和Super

这两个值的意思是上标和下标,因此元素按照这个方式对齐自身如下:

在表格中垂直对齐

不像图片,表格默认为居中垂直对齐:

如果你希望文字与表格的顶部或者底部对齐,应用top或者bottom对齐。

当给表格应用vertical-align时,是靠顶部、底部还是居中对齐要看运气。没有一个值是能够解释的通的,不同的浏览器有不可预料的结果。比如,在表格中给文字应用text-bottom对齐方式时,IE6中是在底部,Safari4中是在顶部。设置为sub,IE6中是在中间,Safari4中是在顶部。

Vertical Align和Inline-Block

图片,从理论上来说是行内元素,表现上却像是行内块级元素。你可以给它设置高度和宽度,它会遵守,不像其它行内元素。

给行内块级元素应用vertical-align,表现就像如上图片那样,这是vertical-align是最少让你担心的。但是那是另外一个故事了……

不要使用缩写

通常你会在表格中看到”valign”来实现垂直对齐。比如,<td valign=top>。需要说明的是这种缩写是不应该使用的。真的没有任何理由这样使用CSS。

 

为什么span错位了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>学习</title>
<style type="text/css">
span
{
display:inline-block;
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<div>
<span>您好</span>
<span></span>
<span></span>
</div>
</body>
</html>

其本质就是元素对齐方式默认是基于baseline的,由于第一个span包含了文本,所以baseline就在文本与相邻的span底部区域,导致表现出来的错位,可以设置span{vertical-align: top;}统一对齐方式即可,@卿君说的浮动只是用另外一种方案避免了这个问题,但是没有给出问题的本质...

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录