1

私の HTMl を参照してください。助けが必要です。

<div class="parent">
  <div class="child"></div>
</div>

CSS :

.parent{position:absolute; height:50px; width:120px; background:green}
.child{background:red; width:15px; height:15px; }

今、私は真ん中に子コンテンツを取りたいと思っています。ただし、親は絶対で設定されているため、行の高さでは機能しません。ご協力いただきありがとうございます。

ここでjsfiddleを参照してください。

4

1 に答える 1

4

これは、.childデバイダがデフォルトでブロック レベルの要素として表示されるように設定されているため、 の影響を受けないためline-heightです。

これを解決するには、次の.childように表示するように設定し、その高さ (50px)に等しい値を指定しinline-blockます。.parentline-height

.parent {
    ...
    line-height: 50px;
}

.child {
    ...
    display: inline-block;
}

例

JSFiddle デモ。

おまけ:.child分割線を中央に配置したい場合は、単純に.parentatext-alignを指定しますcenter(このように)。

編集:仕切り内にテキストを配置する場合は、その高さ (15px) に合わせて.child独自のものを指定する必要があります。line-height

于 2013-11-06T09:26:47.847 に答える