valign特性的html元素,Html+Css_div中的垂直居中布局

垂直居中的N中方法

http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html

CSS中的vertical-align可以实现垂直居中布局，但是

1.它只对行内元素即 display:block 的元素起作用，而对块级元素即 display:block 的元素并不起作用。

2.它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的

、、等，而像

、 这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

但是在CSS中还有一个display属性能够模拟

模拟

注意，display:table 和display:table-cell 的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个

元素：

核心代码：

/*边栏的属性*/

.board_aside{

position: fixed;

top:40%;

left:90%;

border:2px solid red;

border-radius: 5px;

width:40px;

height:190px;

z-index: 10;

/*让父div模拟table,让其具有valign属性,使得子元素可以vertical-align属性*/

display:table;

background-color:#888888;

}

.board_aside .board_aside_list{

/*让子div模拟table里面的元素,需要父div和子div配合使用*/

display: table-cell;

vertical-align:middle;

}

实现的效果：