<!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. Android_按钮被按下效果的实现(selector选择器)

    在很多刚入门的新手在开发实例的过程中,经常会遇到要按下某个ImageView时,需要加入确认感的时候.需要在按下的时候,控制ImageVIew内图片的显示. 在我是新手的时候,也这样做过.所以这里简单 ...

  2. JavaScript继承的实现

    怎样在JavaScript中实现简单的继承?  以下的样例将创建一个雇员类Employee,它从Person继承了原型prototype中的全部属性. function Employee(name, ...

  3. 从零开始学习UNITY3D(GUI篇 群组视图控件)

    控件组可以看成一个大的容器,控件组里面的控件,相对位置已该控件组为基准,而不再已屏幕左上角为基准. 下面来看一下代码实例及其效果截图: public class GUI2 : MonoBehaviou ...

  4. APP应用的发展趋势

    PhoneGap 是什么 PhoneGap 是一个用基于HTML,CSS 和JavaScript 的,创建移动跨平台移动应用程序的快速开发框架.它使开发者能够利用iPhone,Android,Palm ...

  5. js判断年龄是否在0-100之间

    //判断年龄 $('#info_age').change(function(){ var _val = $(this).val(); -]+$/.test( _val ))||_val< || ...

  6. WCF创建到使用到发布

    1,在VS里面新建一个类库项目 2,向类库项目里添加WCF服务文件 3.按照WCF约束规范编写接口和实现类 using System; using System.Collections.Generic ...

  7. window.external.JavaScriptCallCpp

    方案2: 1.编写html <html> <head> </head> <body> <script language="javascr ...

  8. C++学习之嵌套类和局部类

    C++学习之嵌套类和局部类 局部类 在一个函数体内定义的类称为局部类. 局部类中只能使用它的外围作用域中的对象和函数进行联系,因为外围作用域中的变量与该局部类的对象无关.在定义局部类时需要注意:局部类 ...

  9. C++学习之使用new的注意事项

    C++学习之使用new的注意事项       在构造函数中使用new来初始化对象的指针成员成员时必须特别小心,具体的说,应该如下这样做: 一.如果在构造函数中使用new来初始化指针成员,则应该在析构函 ...

  10. HBase shell 操作命令记录

    创建表:create 'tablename','column cluseter:column1,column2...columnn','column cluster:column1,column2.. ...