实例:

  <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. iOS边练边学--UIPickerView和UIDatePicker的简单使用

    一.点菜系统练习(UIPickerView) <1>UIPickerView的常用代理方法介绍 #pragma mark - <UIPickerViewDelegate> // ...

  2. Web API(二):Web API概述

    一.什么是API API(Application Programming Interface)即应用程序编程接口,是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能 ...

  3. 05 Oracle process

    本章提要----------------------------------------------所有的 process 都是在 PGA 内(memory)server process: 与 cli ...

  4. 【转】 PreTranslateMessage作用和使用方法

    PreTranslateMessage作用和使用方法  PreTranslateMessage是消息在送给TranslateMessage函数之前被调用的,绝大多数本窗口的消息都要通过这里,比较常用, ...

  5. Spring @ControllerAdvice @ExceptionHandler

    先来两个连接: Spring3.2新注解@ControllerAdvice Spring 注解学习手札(八)补遗——@ExceptionHandler @Controller Class中如果有@Ex ...

  6. 在对listctrl的控件进行重载的过程中,GetHeaderCtrl()返回NULL的问题

    先谈谈我的问题吧! 在使用listctrl的过程中,我需要在列表头部添加checkbox,实现全选的功能. 经过网上资料的罗列,我找到了一个demo,使用的重绘的方法,在使用的过程中,我发现我的列表头 ...

  7. (转)ALSA配置文件(alsa.conf, asoundrc, asound.conf)及其自动加载 And HDMI Adiuo

    原文出处:http://blog.sina.com.cn/s/blog_a04184c101010kry.html 警告:错误的EDID会造成HDMI发声异常 #title:box:HDMI Audi ...

  8. ubuntu下android环境的搭建

    ---------省略1000字 https://dl-ssl.google.com/android/eclipse/  如果该方法被墙,直接下载最新ADT,在我的博客里有介绍,或者我已经上传百度网盘 ...

  9. C#控件方法及属性大全,望补充

    C#控件及常用设计整理 1.窗体 常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2) WindowState属性: 用来获取或设置窗体的窗口状态 ...

  10. 阿里云ACE下的PHP开发环境搭建

    阿里云ACE下的PHP开发环境搭建 本系列文章由ex_net(张建波)编写.转载请注明出处. http://blog.csdn.net/ex_net/article/details/23999053 ...