0

ブロックを設定したい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

4

2 に答える 2

1

紫色のブロックを垂直に中央揃えしようとしていると思いますか?

その場合、あなたの混乱：

a<div>はブロック レベルの要素ですが、テキストはそうではありません。したがって、 と言う場合line-heightは、ブロック要素の配置ではなく、その要素のコンテンツの text-alignment を指定して、その紫色のブロックのセンタリングを解決し、パディングまたはマージンを使用します。

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

ここでデモ jsFiddle

于 2012-08-16T11:15:10.777 に答える
1

こんにちは、cssにdivを追加します aertical-align middle

.block div {
     vertical-align: middle;
}

デモ

- ---------------------------------------------------------- 中心にしたい場合は今すぐこのボックスは、text-align centerこのように追加するよりも

.block {
    text-align: center;
}

デモ

于 2012-08-16T11:13:38.967 に答える