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

嗨，现在将div aertical-align middle添加到css中。

.block div {
     vertical-align: middle;
}

http://jsfiddle.net/5E7eP/3/

现在--------------------------------------------，如果您想将此框居中，而不是像下面这样添加text-align center

.block {
    text-align: center;
}

http://jsfiddle.net/5E7eP/7/

Answer 2

我猜你是想把紫色的地块竖起来？

在这种情况下，你的混在一起：

<div>是块级元素，其中文本不是.因此，如果您说的是line-height，您可以指定该元素的内容的文本对齐方式，而不是块元素的位置，以解决该紫色块的对中问题，使用填充或边距：

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

这里的演示jsFiddle