实例：

　　<head>
        <style type="text/css">
            span{display: inline-block;height: 15px; line-height: 15px;}
            .span1{width: 3px;background-color: #ccc;}
            .span2{background-color: #ccc; font-size: 12px;}
            .span3{width: 2px; background-color: #ccc;}
        </style>
    </head>
    <body>
        <span>
            <span class="span1"></span>
            <span class="span2">aaaa</span>
            <span class="span3"></span>
        </span>
    </body>

当设置font-size之后，原本垂直居中的三个inline-block的元素，会变的不再垂直居中。

解决方案：

　　1、span{display: inline-block;height: 15px; line-height: 15px; float:left;}

　　2、.span1{width: 3px;background-color: #ccc; vertical-align: middle;}
            .span2{background-color: #ccc; font-size: 12px; vertical-align: middle;}
            .span3{width: 2px; background-color: #ccc; vertical-align: middle;}

疑问：

　　font-size为什么会对排列展示产生影响？

font-size对展示的影响的更多相关文章

  1. unity UGUI text font size对性能影响较大

    Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...

  2. hiho #1288 微软2016.4校招笔试题 Font Size

    #1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...

  3. LaTeX ：font size 修改字体大小的几种方式

    调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...

  4. GetPropInfo Font Size

    设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...

  5. XE6 c++builder 设置 font size GetPropInfo SetOrdProp

    PPropInfo ppi; PTypeInfo pti; TTypeKinds ttk; TRttiContext context; TRttiType *rttiType TObject* obj ...

  6. UIAlertController custom font, size, color

    本文转载至 http://stackoverflow.com/questions/26460706/uialertcontroller-custom-font-size-color up vote2d ...

  7. Phone Font Size

    This table lists and describes the various font sizes that can be applied. Attribute = FontSize   Na ...

  8. PyCharm Change Font Size

    file->settings->colors&fonts-> save as (save the current scheme as your own)-> font- ...

  9. 【hihoCoder】1288 : Font Size

    题目:http://hihocoder.com/problemset/problem/1288 手机屏幕大小为 W(宽) * H(长),一篇文章有N段,每段有ai个字,要求使得该文章占用的页数不超过P ...

随机推荐

  1. javascript 鼠标方式去显示

    document.write("<style type='text/css'>"); document.write(".yyfloat_p{width:209 ...

  2. 搭建Grunt集成环境开发SASS

    先行下载安装Ruby和SASS 再下载并安装node.js,已经集成了NPM 命令行查看是否安装成功 node -v npm -v 命令行安装grunt npm install -g grunt-cl ...

  3. mac for appium环境安装

    之前写过windows 安装appium环境步骤. 1. 需求的前置条件如下 (mac 自动git.ruby.brew命令): 2. java  环境 3. git 环境 4. ruby环境 5. b ...

  4. tomcat:run和tomcat7:run的区别，以及Apache Tomcat Maven Plugin 相关

    起因: 同事部署的maven项目,之前使用 jetty,现在切换到 tomcat,但是他使用的命令是 tomcat:run ,而不是 tomcat7:run,能启动,但出现问题了. 于是搜索了一番,想 ...

  5. Oracle-05-SQL语句概述、分类&amp;SQL*PLUS概述（初识insert,desc,list,r,del,a,c,n等命令）

    一.SQL语句概述 (1)SQL全程是"结构化查询语言(Structured Query Language)". SQL是大多数主流数据库系统採用的标准查询语言. (2)SQL语句 ...

  6. R语言绘图边框的单位

    在R语言中指定画图边框时,通常使用两种单位, lines 和 inches 当然,这两个单位之间是可以相互转换的,那么 1 inch = ? line 答案是1 inches = 5 lines 下面 ...

  7. CIRI 识别circRNA的原理

    CIRI 根据circRNA 连接点处的reads来识别circRNA, 在连接点处的reads 其比对情况非常特殊: CIRI 根据3种模型来识别circRNA, 连接点处的read 叫做junct ...

  8. ubuntu12.04 修改登陆用户 为root

    Ubuntu 12.04默认是不允许root登录的,在登录窗口只能看到普通用户和访客登录.以普通身份登陆Ubuntu后我们需要做一些修改,普通用户登录后,修改系统配置文件需要切换到超级用户模式,在终端 ...

  9. DLL接口自动化测试总结

    1. DLL接口测试方法介绍 在最近测试的项目中,系统给业务端提供DLL文件,业务端通过DLL文件中的C++接口实现系统功能,这就需要对DLL中的C++接口进行详细功能测试. 本文主要介绍项目测试中使 ...

  10. 安装并配置ROS环境1

    ros学习之路(原创博文,转载请标明出处-周学伟http://www.cnblogs.com/zxouxuewei/) 一.ros核心教程    1.安装并配置ROS环境: 注意: 学习这节课之前请按 ...