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)即行内格 ...
随机推荐
- redis持久化与可用性
redis对于持久化有快照及aof日志文件两种形式. 快照db文件,长处是二进制,大小比aof日志文件小.但会丢失最后一次成功备份时间到down机时间的数据. aof相比而言文件大小就大了点,但相对快 ...
- 官网下载旧版本的Xcode
1.登录“苹果开发者中心”——>“SDKs” 2.点击“Xcode” 3.点击页面顶部的“Download” 4.点击页面左下方的“additional tools”,这样就可以查询到各个Xco ...
- ACM题目：487-3279
题目是这样子的 Description Businesses like to have memorable telephone numbers. One way to make a telephone ...
- Ini文件操作类
/// <summary> /// Ini文件操作类 /// </summary> public class Ini { // 声明INI文件的写操作函数 WritePriva ...
- SGU 187.Twist and whirl - want to cheat( splay )
维护一个支持翻转次数M的长度N的序列..最后输出序列.1<=N<=130000, 1<=M<=2000 splay裸题... ------------------------- ...
- SGU 506.Subsequences Of Substrings
求一个串S有多少子串subS满足s是subS的子序列.len(S)<=100000, len(s)<=100 直接扫一遍... ------------------------------ ...
- Java文本编辑器中遇到的问题详解
今天介绍文件的读取和写入,分别用FileReader,FileWriter 1,FileWriter类(字符输出流类) 构造方法:FileWriter fw = new FileWriter(Stri ...
- docker10件事
docker – 你应该知道的10件事 容器并不是一个全新的技术,但这并不妨碍Docker如风暴一样席卷整个世界. 如果你在IT圈里,你一定听说过Docker.就算与其他热门技术,如:Puppet ...
- 基于KVM建立虚拟机的步骤及总结说明
1.前言 目前正在涉足云计算IaaS工作,虚拟化是IaaS的重要部分,因此这段时间对各个虚拟机化技术和工具进行研究,研究的目的不仅仅是为了会使用这个工具,而是通过研究了解技术的实现机制和原理,即知其然 ...
- C#中隐式操作CMD命令行窗口
原文:C#中隐式操作CMD命令行窗口 MS的CMD命令行是一种重要的操作界面,一些在C#中不那么方便完成的功能,在CMD中几个简单的命令或许就可以轻松搞定,如果能在C#中能完成CMD窗口的功能,那一定 ...