inline-block 垂直居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.test span{
background-color: red;
display: inline-block;
width: 8px;
height: 18px;
line-height: 18px;
}
.test i{
display: inline-block;
width: 8px;
height: 12px;
vertical-align: middle;
background-color: green;
} .pageFlip{
position: absolute;
left: 325px;
top: 0px;
}
.pageFlip span{
display: inline-block;
padding: 0px 6px 0px 6px;
height: 18px;
line-height: 18px;
width: 8px;
border: 1px solid #d9d9d9;
background-color: #f2f2f2; }
.pageFlip span i{
display: inline-block;
width: 8px;
height: 12px;
vertical-align: middle;
background-image: url("http://img.t.sinajs.cn/t5/style/images/common/icon.gif?id=201404081745");
background-position: -104px -327px;;
}
</style>
</head>
<body>
<div class='test'>
<span>
<i></i>
</span>
</div> <div class="pageFlip">
<span class="pagePre">
<i></i>
</span> </div>
</body>
</html>
inline-block 垂直居中的更多相关文章
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box" ...
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...
- CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
随机推荐
- Linux下的经常使用性能查询命令top、vmstat、gprof、pidstat之对照
(1)查看各个CPU核的使用情况 sudo top -d 1 进入之后,按1,会出现以下的CPU使用情况,当中us列反映了各个CPU核的使用情况,百分比大说明该核在进行紧张的任务. (2)查看哪个进程 ...
- python代码的书写要求
刚刚接触python,python是对缩进要求很严格的语言,对于我这种平时tab,空格乱用的菜鸟来说简直是吃劲苦头阿,经常出现IndentationError.在这里我就结合自己的经历说说书写格式,如 ...
- C# 想要程序文件移动 而数据保持相对位置
如果用的数据库是access数据库 可以把数据库文件放到bin\debug下面,引用相对位置就可以了 如果程序中有上载文件,而程序需要使用到该文件,那么我们最好也是引用相对文件,我们只需要在数据表中的 ...
- Deep Learning（深度学习）学习笔记整理系列之（七）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Clamp函数
Clamp函数可以将随机变化的数值限制在一个给定的区间[min, max]内: template<class T> T Clamp(T x, T min, T max) { if (x & ...
- [非技术参考]C#基础：使用Thread创建线程(1)
Thread类可以创建和控制线程,Thread类的构造函数重载为接受ThreadStart和ParameterizedThreadStart类型的委托参数.下面我们用一个例子来解释怎样用Thread类 ...
- 搭建单节点Hadoop应用环境
虚拟机: VirtualBox 5 Server操作系统: Ubuntu Server 14.04.3 LTS 如果对虚拟机空间和性能不做考虑, 且不习惯用Linux命令, 你也可以使用Ubuntu ...
- Javascript类型检测
原地址 http://www.cnblogs.com/fool/archive/2010/10/07/javascrpt.html 开门见山,我们先来看一下代码: var is = function ...
- svn和ftp的区别
svn和ftp的区别是: ftp修该文件后就会替换原来的内容无法恢复.如果要回复,还需要自己在替换前做备份.如果遇到多人同时操作同一文件就会很头疼.且无法对相应修改进行记录. svn可以将你每一次的修 ...
- Qgis插件开发之Qgis源码学习
Qgis源码中的拖拽.zoomin/out等各个基础功能插件的实现位于qgis_app工程中. 具体头文件为: \QGIS\src\app\qgisapp.h 根据此类可以逐个找到Qgis的基础插件的 ...