最近在使用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对齐,问题解决了~

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

  1. 实现全屏轮播,并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

  2. 在div中设置文字与内部div垂直居中

    要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta ...

  3. div中单行文字垂直水平居中

    1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...

  4. 解决echart在IE中使用时,在div中加入postion后图表不显示问题

    <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px;width:1 ...

  5. DIV CSS display(block,inline,none)的属性教程

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  6. 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  7. div之间有间隙以及img和div之间有间隙的原因及解决方法

    原因: div 中 存在 img标签,由于img标签的 display:inline-block 属性. display:inline-block布局的元素在chrome下会出现几像素的间隙,原因是因 ...

  8. img和div之间有间隙的原因及解决方法

    div 中 存在 img标签,由于img标签的 display:inline-block 属性. #####display:inline-block布局的元素在chrome下会出现几像素的间隙,原因是 ...

  9. 用jQuery向div中添加Html文本内容

    前台代码: <link href="http://www.cnblogs.com/Content/themes/base/jquery-ui.css" rel="s ...

随机推荐

  1. css清除浮动定位造成的异常

    清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...

  2. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  3. Universal-Image-Loader完全解析(上)

    Universal-Image-Loader完全解析(上) 基本介绍及使用 大家平时做项目的时候,或多或少都会接触到异步加载图片,或者大量加载图片的问题,而加载图片时候经常会遇到各种问题,如oom,图 ...

  4. [leetcode] Reverse Bits

    Reverse Bits Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (re ...

  5. 在Android开发中使用Ant 二:进行一次完整的打包

    一次完整的Android打包要进行以下的几步:编译.代码混淆.打包apk.签名apk.apk优化. 为了能包涵使用NDK的情况,在这里使用一个有native代码的工程TestJni. 在工程根目录下新 ...

  6. 【原】训练自己haar-like特征分类器并识别物体(1)

    本系列文章旨在学习如何在opencv中基于haar-like特征训练自己的分类器,并且用该分类器用于模式识别.该过程大致可以分为一下几个大步骤: 1.准备训练样本图片,包括正例及反例样本 2.生成样本 ...

  7. UIView与CALayer的区别

    1.UIView相比CALayer最大区别是UIView可以响应用户事件,而CALayer不可以.UIView侧重于对显示内容的管理,CALayer侧重于对内容的绘制. 2.UIView和CALaye ...

  8. NSURLSession/NSURLConnection的上传文件方法(已做了更新)

    最好的学习方法就是 领悟 + 证悟. 此篇文章的理论基础主要是与HTTP网络通信协议相关.为集中精力,可以先把TCP/IP协议这些置之不理,也就是先只关注HTTP的请求和响应的结构.HTTP完整的原理 ...

  9. 使用eclipse遇到问题:the-package-collides-with-a-type

    相似问题:http://stackoverflow.com/questions/12236909/the-package-collides-with-a-type

  10. windows log 打印语句

    1.格式化字符串(Writes formatted data to the specified string) wchar_t szMessage[260]; PWSTR pszFunction = ...