1

3 つの部分に分割されたインライン要素があります。最初は背景画像のみの要素です。2 番目はコンテンツ用で、最後の 1 つは別の背景画像のみです。HTMLは

<span class="box-l"></span>
<span class="box-c">some text</span>
<span class="box-r"></span>

そしてCSS：

.box-l{
    width: 7px;
    height: 20px;
    min-width: 10px;
    background:url(../img/c_box.png) 0 0;
    display: inline-block;
    border: 0px;
}
.box-r{
    width: 5px;
    height: 20px;
    min-width: 5px;
    background:url(../img/c_box.png) -42px 0;
    display: inline-block;
}
.box-c{
    height: 20px;
    min-width: 10px;
    max-width: 40px;
    display: inline-block;
    font-size: 11px;
    line-height: 20px;
    background:url(../img/c_box.png) -9px 0;
}

中央の要素に何もない場合、結果は次のようになります。良い結果 しかし、2 番目の要素にテキストを入力すると、結果は次のようになります。間違った結果

中央の要素がテキストを内側にして下に移動するのはなぜですか? どうすればこれを解決できますか?

4

1 に答える 1

-1

display: inline-block: を使用する場合は、vertical-align: middle; を入れることを忘れないでください。テキストと同じ時間で行の高さ（行の高さ）を維持して、垂直方向の配置を確保します

于 2013-04-24T19:47:13.443 に答える