zoukankan      html  css  js  c++  java
  • “display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法

    转:http://www.xuebuyuan.com/825857.html

    故事:

    最近在使用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使用方法讲解》(转自:http://www.jzxue.com/wangyesheji/css/201006/11-3937.html

    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(如果你没有做任何声明的话)。图片会和文字以文字基线为准对其。注意下行字母降到了基线以下。图片不会和下行字母的最下端对齐,那不是基线。

    baseline2.png

    Middle

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

    vert-align-cross-browser.jpg

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

    vert-align.png

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

    pushdown.png

    Text-bottom

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

    text-botto.png

    Text-top

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

    text-top.png

    Top和Bottom

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

    Sub和Super

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

    subandsuper.png

    在表格中垂直对齐

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

    table-middle.png

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

    topandbottom.png

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

    Vertical Align和Inline-Block

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

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

    不要使用缩写

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

     

     

    欢迎加入,Java,前端的共同学习【爱问共享编程部落】 479668591

  • 相关阅读:
    (Java实现) 洛谷 P1603 斯诺登的密码
    (Java实现) 洛谷 P1036 选数
    (Java实现) 洛谷 P1036 选数
    (Java实现) 洛谷 P1012 拼数
    (Java实现) 洛谷 P1012 拼数
    (Java实现) 洛谷 P1028 数的计算
    (Java实现) 洛谷 P1028 数的计算
    (Java实现) 洛谷 P1553 数字反转(升级版)
    8.4 确定两个日期之间的月份数或年数
    (Java实现) 洛谷 P1553 数字反转(升级版)
  • 原文地址:https://www.cnblogs.com/guxingzhe/p/5391292.html
Copyright © 2011-2022 走看看