实例：

　　<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. js类型转换 之 转数字类型

    手动将各类型 转换成 数字类型 JS提供了三种方法: Number(object); parseInt(string, radix); parseFloat(string, radix). 三种方法具 ...

  2. 几个Tab，滑动门，选项卡，图片切换

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. .NET操作Excel笔记

    如果你新建一个项目的话,首先要添加Microsoft.Office.Core 与Microsoft.Office.Interop.Exce这两个应用,然后就能很方便的操作了,示例代码(只实现了简单的读 ...

  4. 从 QA 到 EP

    两三年以前,和友人谈到 QA(软件质量保证) 这个行业,还有 QA 这个团队的未来,就有了一丝忧虑.而现在,终于有机会实践一下自己之前的想法,在这里分享给大家. 从我有限的从业经验到现在,经历了很多次 ...

  5. openfire url get提交 中文乱码问题

    原因是它只接受url编码后的中文 如:%E7%BC%96%E7%A0%81%E5%90%8E%E7%9A%84%E4%B8%AD%E6%96%87 会自动转变为:http://127.0.0.1:90 ...

  6. RL Problems

    1.Delayed, sparse reward(feedback), Long-term planning Hierarchical Deep Reinforcement Learning, Sub ...

  7. vlc player验证交换机igmp

    使用vlc media player发送多播数据,验证交换机igmp的设置是否成功. 链接 http://peakdrive.com/?p=440 http://www.dasblinkenlicht ...

  8. Unity中坐标系转换方法

    前言 本篇文章主要是参考<Unity API 解析>---陈泉宏. 这是本人在学校图书馆找到一本书,主要介绍的就是常用的类,比较实用,没有冗余的地方.在此推荐一下这本书! 一.Screen ...

  9. Extjs 下拉框

    刚刚熟练了easyui控件的使用,又開始了如今的这个项目. 这个项目是个半成品.前端使用的是Extjs控件,jsp中没有代码.就引用了非常多的js...于是乎有种不知所措了呀. . . 说实话特别的不 ...

  10. 结构型模式概述（Structural Pattern)

    结构型模式可以描述两种不同的东西:类与类的实例.结构型模式可以分为类结构型模式和对象结构型模式. 类结构型模式关心类的组合,可以由多个类组合成一个更大的系统,在类结构型模式中只存在继承关系和实现关系: ...