vertical-align沒生效的原因

目的：讓文字在div中居中

<div class="test">
	<a href="">測試文字</a>
</div>

.test{
	width: 200px;
	height: 80px;
	background-color: #ffff00;
	color: #000000;
	text-align: center;
	vertical-align : middle;   
}

但是設置上vertical-align之後並沒有生效，效果如下：

原因是vertical-align只對行內標籤有效（div標籤，不是裏面的子標籤）於是加上代碼

                 display: table-cell;

得到了效果圖

不能設display：inline-block屬性的原因， 是inline-block只是將塊級元素當成內聯元素排列，但是並沒有把它變換爲內聯元素。

 

附display屬性值