最近在使用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. 汉化入门之ExplorerControls

    第一次汉化,高手勿喷. 01.问题描述 在ArcGIS中有个添加数据窗口,如果在应用程序中直接调用它,则风格一致性则存在问题,很多时间我们都自定义添加数据窗口,我曾经也尝试过.详见ExplorerCo ...

  2. CRM行编辑控件

    原创,转载请说明出处 王红福 http://www.cnblogs.com/hellohongfu/p/4792452.html CRM 本身的表格可以根据定义显示列信息,但是出于性能考虑不能详细的展 ...

  3. 讲解Canvas中的一些重要方法

    Canvas所提供的各种方法根据功能来看大致可以分为几类: 第一是以drawXXX为主的绘制方法: 第二是以clipXXX为主的裁剪方法: 第三是以scale.skew.translate和rotat ...

  4. Android项目实战(三):实现第一次进入软件的引导页

    最近做的APP接近尾声了,就是些优化工作了, 我们都知道现在的APP都会有引导页,就是安装之后第一次打开才显示的引导页面(介绍这个软件的几张可以切换的图) 自己做了一下,结合之前学过的 慕课网_Vie ...

  5. 【原】log4cplus使用说明

    网上关于开源日志工具log4cplus的说明有很多,但大多略显复杂,本文主要从实用的角度,介绍一种最简单而且又实用的方法.本文的方法已经足够满足实际工程中的使用需求,而且不需要很复杂的流程,可以实现. ...

  6. Swift语言

    本文为熟悉使用Objective-C开发iOS快速转入swift开发提供一些便利的途径,没有过多华丽的说明底层原理,也没有过多的概念说明,只提供swift的基本使用以及一些使用示例.高手请让路哈. S ...

  7. Animating Views Using Scenes and Transitions

    From android 4.4 , it supply one new animation with layout:transition To help you animate a change b ...

  8. android之apk反编译

    今天就来详细的讲一讲apk的反编译过程,之前自己一直没彻底搞清楚. 一.准备工作 反编译首先要准备三个工具.这三个工具都是可以百度下载的.就是下图所示的三个工具. 这三个工具是有各自作用的: (1)a ...

  9. 为Asp.net MVC中的RenderSection设置默认内容

    1. RenderSection的简单介绍 Asp.net MVC中提供了RenderSection方法,这样就能够在Layout中定义一些区块,这些区块留给使用Layout的view来实现比如我们定 ...

  10. 如何在linux系统中设置静态ip地址

    在终端中输入:vi /etc/sysconfig/network-scripts/ifcfg-eth0 开始编辑,填写ip地址.子网掩码.网关.DNS等.其中"红框内的信息"是必须 ...