实例：

　　<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. java——多线程的实现

    package test; class TestThread extends Thread{ public void run() { for(int n=0;n<3;n++) { try{Thr ...

  2. 【SpringMVC笔记】第三课 处理器映射器+处理器适配器

    第二课的例子中,在springmvc.xml中配置使用了第一种处理器映射器和处理器适配器,如下所示. <!-- 配置第一种处理器映射器 BeanNameUrlHandlerMapping --& ...

  3. phalcon遇到的那些坑

    1.数据重复插入 数据被重复插入,一般是在index/index方法中进行数据库insert操作,会发现一条数据被重复插了一次. 原因:浏览器有时候会自动请求 /favicon.ico ,而你的网站并 ...

  4. DataGridView使用技巧四：删除行操作

    一.无条件的删除行 默认时,DataGridView是允许用户进行行的删除操作,选中要删除的行,按Delete键可以删除,该操作没有任何提示(只是删除界面显示的数据,不会真实删除数据库中的数据).如果 ...

  5. 七、CentOS 6.5 下 Nginx的反向代理和负载均衡的实现

    CentOS 6.5 下 Nginx的反向代理和负载均衡的实现 * 修复上面文章的问题: 复制出一个tomcat2之后,修改service.xml文件时,要修改三个端口: 1. <!-- 800 ...

  6. 有趣的 Mysql 存储引擎

    Mysql 提供了一套统一的应用开发模型和核心 API,因此,尽管不同的存储引擎拥有不同的特性,不过对于开发人员,应用操作都是完全透明的.应用层的连接并不直接访问存储引擎层,而是访问 Mysql 提供 ...

  7. select文本框架（change事件）改变另外一个select的值

    $('select[name=adults]').bind('change', function() { var $value = $(this).val(); if ($value >= 1) ...

  8. 25+开源的在线购物软件(PHP, JavaScript 和 ASP.Net)

    25 +免费开源的电子商务解决方案,提供了建立一个在线购物所有主要功能,并能够连接到一个支付处理系统1. Magento Magento是一套专业开源的PHP电子商务系统.Magento设计得非常灵活 ...

  9. UML总结---UML中的事物和关系

    UML中的事物 名称 说明 图形 类 相同属性方法的集合 接口 类或组件提供的,可以完成特定功能的一组操作的集合 协作 合作的动作 用例 系统的一个功能 节点 代表可计算的资源 活动类 有多个线程的类 ...

  10. 关于Cocos2d-x节点和精灵节点的坐标、位置以及大小的设置

    1.cocos2d-X中的坐标(0,0),就是运行框的左下角位置,所以运行框看起来就是一个第一象限. 2.节点的锚点就是我们setPosition所设定的位置,默认锚点是在节点的中心,也就是setPo ...