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;
}

的 Demo 的

- 的 ------------------------------------------- 现在，如果你想把这个方框放在中心而不是像这样添加text-align center

.block { text-align: center; }

的 Demo 的

Answer 2

我猜你试图将紫色块垂直居中？

在这种情况下你的混合物：

<div>是一个块级元素，而文本则不是。所以如果你说line-height，你指定该元素的内容的文本对齐，而不是块元素的定位，以解决紫色块的居中，使用填充或边距：

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

Demo over here jsFiddle

CSS：内联块与内联文本

2 个答案: