<!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 垂直居中的更多相关文章

  1. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  2. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  3. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  4. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  5. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  6. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  7. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  8. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

  9. [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 ...

  10. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

随机推荐

  1. MySQL 5.6.19 二进制安装

    1.        操作系统 CentOS release 6.2 (Final) 2.        创建用户和组 [root@mymaster1 ~]# groupadd mysql [root@ ...

  2. SQL学习之联结表的使用

    1.简介:"联结(join)表"是SQL最强大的功能之一.联结是利用SQL的SELECT能执行的最重要的操作,很好地理解联结及其语法是学习SQL的极为重要的部分! 在能够有效的使用 ...

  3. php采集文章中的图片获取替换到本地

    /** * 获取替换文章中的图片路径 * @param string $xstr 内容 * @param string $keyword 创建照片的文件名 * @param string $oriwe ...

  4. 红豆带你从零学C#系列之：开始C#编程（一）

    让我们开始学习C#编程吧 作者:红豆西米露 交流QQ:937802080 前面的文章里给大家介绍了C#语言的一些基本认识,现在我们来开始做一个小程序吧! 在这里以我们以“控制台应用程序”来作演示. P ...

  5. 转 --maven系列之一 简介

    http://blog.csdn.net/jiuqiyuliang/article/details/41076215 [项目管理和构建]——Maven简介(一) 2015-01-31 21:27 68 ...

  6. 多关键字排序（里面有关于操作符（<<运算符 和 >>运算符 ）的重载）

    一种排序 时间限制:3000 ms | 内存限制:65535 KB 难度:3   描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都是整数:现 ...

  7. [Usaco2009 Feb]Revamping Trails 堆优化 Dijkstra

    .. 这题一眼就看出就是一个二维DP dp[i][j]表示到点i使用了j次免费边的最短距离 MD 卡SPFA.. 遂写dij. AC #include <iostream> #includ ...

  8. hdu 2824The Euler function

    题目链接 快速求出a到b之间所有数的欧拉函数. 一个一个求肯定是不行的, 我们知道欧拉函数的公式为phi(n) = n*(1-1/i1)*(1-1/i2).......i1, i2为素因子. 那么我们 ...

  9. codeforces 463C Gargari and Bishops

    题目链接 这个题, 最主要的应该是找到对角线上的格子的关系. “ \" 这种对角线, 关系是x-y+n相等, ” / “ 这种, 关系是x+y相等.知道每个格子的两种对角线的值, 那么这个格 ...

  10. oracle 两表数据对比---minus

        1 引言 在程序设计的过程中,往往会遇到两个记录集的比较.如华东电网PMS接口中实现传递一天中变更(新增.修改.删除)的数据.实现的方式有多种,如编程存储过程返回游标,在存储过程中对两批数据进 ...