CSS:内联 block 与内联文本

Question

我希望我的 block 由 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;
}

Demo

----------------------------------------- 现在如果你想让这个框居中而不是像这样添加 text-align center

.block {
    text-align: center;
}

Demo