css - CSS：内联块与内联文本

Question

我希望我的块被设置line-height（就像我对文本所做的那样）。我知道我应该display: inline-block在这种情况下使用，但这对我不起作用。为什么？

HTML：

<div class="block">
    <div></div>
</div>
<div class="block">
    test
</div>

CSS：

.block {
    line-height: 50px;
    height: 50px;
    width: 50px;
    border: 1px solid black;
}
.block div {
    height: 40px;
    width: 28px;
    background-color: #f0f;
    display: inline-block;
}

现场演示：jsFiddle

Answer 1

嗨，现在在你的CSS中添加你的div aertical-align middle

.block div {
     vertical-align: middle;
}

演示

- -------------------------------------------------------- 如果你想居中这个盒子比text-align center像这样添加

.block {
    text-align: center;
}

演示

Answer 2

我猜你是想把紫色块垂直居中？

在那种情况下，你把事情搞混了：

a <div> is a block-level element, where text is not. so if you say line-height, you specify text-alignment of the content for that element, not positioning of a block element, to solve the centering of that purple block, use padding or margin:

.block div {
    height: 40px;/* 50 - 40 = 10pixel/2 = 5px space */
    width: 28px;
    background-color: #f0f;
    margin-top: 5px;
}

Demo over here jsFiddle