1

私は次のフィドルを持っています

左側に 32 x 32 の画像があり、右側に 2 行のテキストがあります。誰かがこれを見て、どこが間違っているのか教えてください。私が必要とするのは、gif の中心とテキストを囲んでいるフレームの中央に揃えることだけです。

フィドルからわかるように、マージンのかなりの数の異なる組み合わせを試しましたが、どれもうまくいかないようです。

「display: inline-block;」を使用しているため、問題がありますか? または他の問題がありますか？

<div class="server-info">
   <div style="z-index: 99; width: 32px; height: 32px;
      margin-top: 9px;
      margin-bottom: 9px;
      margin-right: 3px; display: inline-block;" id="load-icon"></div>
   <div style="display: inline-block; margin-top: 5px;
      margin-bottom: 5px; height: 40px;">XXX<br>YYY </div>
</div>

CSS

.server-info {
    border-radius: 0.4em 0.4em 0.4em 0.4em;
    border-top: 0 none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.65);
    color: white;
    display: inline-block;
    margin-left: 0.5em;
    padding: 0 1em;
    vertical-align: top;
    font-size: 1em;
    margin-top: 1.6em;
    padding-left: 1em;
    padding-right: 1em;
    text-align: left;
    text-transform: none;
    background: none repeat scroll 0 0 #000000;
}

#load-icon
{
    background: url("http://www.smilecarwash.com/images/ajax-loader.gif");
    background-repeat: no-repeat;
}

更新：フィドルリンクを修正しました-申し訳ありません

4

1 に答える 1

1

これはあなたが探しているものですかhttp://jsfiddle.net/BcPjz/4/

縦方向に中央に揃えるには、テキスト divにdisplay:table-cellandを追加する必要があります。vertical middle

またはこれhttp://jsfiddle.net/GYkBC/1/

display:block画像の下にテキストを配置するには、画像 div またはテキスト div に追加します

于 2012-09-12T07:11:41.377 に答える