一起使用垂直对齐和高度

Question

如果我在不给vertical-align: middle;的情况下使用height本身，它就可以了。一旦我给出高度，垂直对齐就不起作用。

CSS

.inlineblock{
    display: inline-block;
    width: 100px;
    text-align: center;
    vertical-align: middle;
    padding:  10px;
    background: #4f81bd;
    color: #fff;
    height: 200px;
}

HTML

<div class="inlineblock">
<p>information here</p>
</div>
<div class="inlineblock">
<p>more information here</p>
</div>
<div class="inlineblock">
<p>another more information here</p>
</div>

如何使用vertical-align：middle和height？

JSFIDDLE

Answer 1

您应该使用display: table-cell

.inlineblock{
    display: table-cell;
    width: 100px;
    text-align: center;
    vertical-align: middle;
    padding:  10px;
    background: #4f81bd;
    color: #fff;
    height: 200px;
}

<div class="inlineblock">
<p>information here</p>
</div>
<div class="inlineblock">
<p>more information here</p>
</div>
<div class="inlineblock">
<p>another more information here</p>
</div>

更新：

section{
	display:table;
	border-collapse:separate;
	border-spacing:5px;
	}
.row {
	display:table-row;
}
.inlineblock {
	display:table-cell;
	width: 100px;
    text-align: center;
    vertical-align: middle;
    padding:  10px;
    background: #4f81bd;
    color: #fff;
    height: 200px;
}

<section>
	<div class="row">
		<div class="inlineblock">
   		  <p>information here</p>
		</div>
		<div class="inlineblock">
		  <p>more information here</p>
		</div>
		<div class="inlineblock">
		  <p>another more information here</p>
		</div>
	</div>
</section>