inline-block 实现元素垂直居中

标签：

---恢复内容开始---

1.元素的显示方式：

1 　　 display:inline;
3     display:linline-block; 
5 　　 display:block

   display:inline 表示，元素做为内联元素显示，两个或者多个内联元素可以并列成一行显示；常见的内联元素如：span strong 标签；内联元素的特点是：不能给元素设置宽和高；

   display:block 表示，元素作为块级元素显示，两个或者多个块级元素分成多行显示；常见的块级元素如：div, h1~h5 标签；块级元素的特点是：可以给元素设置宽高，分行显示；

   display:inline-block,元素作为内联元素显示，在父级元素宽度足够的情况下，两个或者多个inline-block 元素并列成一行显示；inline-block 的元素可以设置宽高；

2. 对于vertical-align：

　　支持程度：所有浏览器都支持 vertical-align 属性（包括 IE8）

     作用：该属性定义行内元素的基线相对于该元素所在行（父级元素）的基线的垂直对齐方式。

　　可能的取值方式:

　　baseline： 元素的基线放置在父级元素的基线上；（vertical-align 属性的默认值是 baseline）；

      text-top/text-bottom：把元素的底端垂直与父元素的文本的顶端/底端对齐；

      top：把元素的顶端与行中最低的元素的顶端对齐。

      bottom：把元素的顶端与行中最低的元素的顶端对齐。【注意，top/bottom 对应的边界是 父级元素的border 的内边界】

      middle：把元素相对于父级元素垂直居中；

   所以为了使得元素相对于父级元素垂直居中，我们可以把元素的 display 属性设定为 inline-block;同时把元素的 vertical-align 属性值设定为 middle;

 3. 如何将一个元素相对于父级元素居中:    

<div class="father">
	<div class="son"></div>
</div>

可以采取样式：

---恢复内容结束---

inline-block 实现元素垂直居中

标签：

原文地址：http://www.cnblogs.com/pandoraCat/p/4462050.html