font-size对展示的影响
实例:
<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对展示的影响的更多相关文章
- unity UGUI text font size对性能影响较大
Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...
- hiho #1288 微软2016.4校招笔试题 Font Size
#1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...
- LaTeX :font size 修改字体大小的几种方式
调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...
- GetPropInfo Font Size
设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...
- XE6 c++builder 设置 font size GetPropInfo SetOrdProp
PPropInfo ppi; PTypeInfo pti; TTypeKinds ttk; TRttiContext context; TRttiType *rttiType TObject* obj ...
- UIAlertController custom font, size, color
本文转载至 http://stackoverflow.com/questions/26460706/uialertcontroller-custom-font-size-color up vote2d ...
- Phone Font Size
This table lists and describes the various font sizes that can be applied. Attribute = FontSize Na ...
- PyCharm Change Font Size
file->settings->colors&fonts-> save as (save the current scheme as your own)-> font- ...
- 【hihoCoder】1288 : Font Size
题目:http://hihocoder.com/problemset/problem/1288 手机屏幕大小为 W(宽) * H(长),一篇文章有N段,每段有ai个字,要求使得该文章占用的页数不超过P ...
随机推荐
- Java中的 多线程编程
Java 中的多线程编程 一.多线程的优缺点 多线程的优点: 1)资源利用率更好2)程序设计在某些情况下更简单3)程序响应更快 多线程的代价: 1)设计更复杂虽然有一些多线程应用程序比单线程的应用程序 ...
- Android APP 分享图片文字到微信刚開始正常,后面就不弹出分享框了
依照官方的流程走了一遍.一切顺利,分享成功了.本来以为能够大功告成了,结果睡了一觉,第二天要给客户演示了.才发现TMD坑爹了,不能分享了,第三方的分享栏弹不出来了.我一阵惊慌,还好非常快找到了解决的方 ...
- 单片机小白学步系列(二十) IO口原理
IO口操作是单片机实践中最基本最重要的一个知识,本篇花了比較长的篇幅介绍IO口的原理. 也是查阅了不少资料,确保内容正确无误,花了非常长时间写的. IO口原理原本须要涉及非常多深入的知识,而这里尽最大 ...
- ORACLE11G 字符集更改(这里更改为AL32UTF8)
ORACLE11G 字符集更改(这里更改为AL32UTF8)更改步骤:1.用sysdba角色用户登录sqlplus: 命令行输入:sqlplus sys as sysdba 2.输入口令,进入sqlp ...
- UC浏览器调试移动端网站
准备工作: UC浏览器开发版网址 UC浏览器开发者版下载地址 下载adb_tool 步骤: 1.将adb_tool解压,把里面的文件复制到 C:\Windows\SysWOW64 文件夹下面. 2.运 ...
- Java获取yahoo天气预报
学习闲暇之余,写了个获取yahoo天气预报的java小程序,仅供娱乐. 首先我们需要获取您需要查询城市对应的代号,我们可以用HashMap来查询,代码如下: publicstatic HashMap& ...
- (转)x264代码详细阅读之x264.c,common.c,encoder.c
转自:http://alphamailpost.blog.163.com/blog/static/201118081201281103931932/ x264代码详细阅读第一之x264.chttp:/ ...
- CentOS 7拨号上网(ADSL & PPPoE)
步骤概述: 1.搜寻PPPoE相关软件,本人使用的是rp-pppoe yum search pppoe 2.使用yum安装rp-pppoe yum install rp-pppoe -y 3.开始配置 ...
- 查看CentOS的网络带宽出口
检查维护系统的时候,经常会要查看服务器的网络端口是多大的,所以需要用到Linux的一个命令. 如何查看CentOS的网络带宽出口多大?可以用下面的命令来查看. # ethtool eth0 前面是命令 ...
- Java回调方法的设计思路
package com.test; /** * 回调方法的设计技巧,例如hibernate的getHibernateTemplate().execute(Handler h)方法 */ public ...