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)即行内格 ...
随机推荐
- 对XXX（数字）安全卫士实在是忍无可忍了，为什么一定要像日本鬼子强奸妇女一样强奸我们这些弱小者
一直一来对XXX(数字)安全卫士非常痛恨,无耻,恶心,没有底线,还有对待我们这些弱小者,就像当年日本鬼子强奸妇女一样,血粼粼的虐杀我们这些弱小者,无法反抗,又必须接受. 你强制杀掉别人的ADB 就算了 ...
- JavaScript之JS实现动画效果
在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...
- log4j 详解
转载自:http://www.blogjava.net/hwpok/archive/2008/08/23/223891.html >>>>1. 概述<<< ...
- Objective-C中一些 值得程序员注意的地方(转载)
1.有关于BOOL陷井方面有如下方面: 关于BOOL条件语句中的比较最好是与NO的值来进行比较,因为BOOL的YES与NO值只是约定,并且编译器将BOOL认作8位二进制数据.若是不小心将一个长于1字节 ...
- git 使用随笔
/*将远端库git@github.com:myrepo/base.git从远端clone到本地*/git clone git@github.com:myrepo/base.git /*克隆版本库的时候 ...
- 在VC中，为图片按钮添加一些功能提示(转)
在VC中,也常常为一些图片按钮添加一些功能提示.下面讲解实现过程:该功能的实现主要是用CToolTipCtrl类.该类在VC msdn中有详细说明.首先在对话框的头文件中加入初始化语句:public ...
- JavaSE复习日记 : java包机制
这里是第一个文件,命名为JavaSE_01.java,我在这个文件里面声明了一个m1()方法,通过包机制,我将在另外一个文件夹里访问这个文件里的东西,确切的说是访问这个文件生成的一个class文件; ...
- HOJ1014
Niven Numbers My Tags (Edit) Source : Unknown Time limit : 1 sec Memory limit : 32 M Submitt ...
- leetcode Integer to Roman python
class Solution(object): def intToRoman(self, num): """ :type num: int :rtype: str &qu ...
- textarea中的空格与换行
当在一个textarea标签中键入一个回车时,实际上会插入2个符号:\n\r在javascript里, line breaks用\n表示when you pull text into Javascri ...