1

表のセルに背景画像を生成する次のコードがあります。その画像をセルの中央に配置したいと思います。

<tr>
  <td valign="top" width=<%=width%>>
    <div id="loading" 
       style="background-image: url(spinner.gif); height: 16px; width: 16px;">
    </div>
  </td>
</tr>

試してみalign=centerましたが、うまくいきませんでしたtext-align: center。

4

4 に答える 4

6

背景画像を中央に配置する

background-position物件をお探しのあなた。

プロパティを短いbackgroundプロパティに結合することもできます。

#loading {
  background: url(spinner.gif) no-repeat center center;
}

セル内で要素を中央に配置する

あなたの質問のもう1つの読み方は、ローディングアニメーションをテーブルセルの中央に配置したいということです。その場合は、CSS プロパティtext-alignとを使用することをお勧めしますvertical-align。

td.loading {
  text-align: center;
  vertical-align: middle;
}

以下のHTMLで

<td class="loading">
  <img src="loader.gif" />
</td>

http://jsbin.com/udehox/で動作するデモをオンラインで見ることができます。

yourはブロック要素であり、デフォルトでDIVは表示されないことに注意してください。inlineそのため、左右にスペースがないため、「中央に配置」することはできません。

display: inlineordisplay: inline-blockステートメントを付けることで、強制的にインライン要素として表示することができます。

于 2012-04-06T16:09:34.187 に答える
0

セル内でdivを中央に配置しようとしているようです。divにマージンを設定するか、相対位置を使用できます。画像に背景位置を設定しても効果はありません。divは16x16に設定されていますが、これは画像のサイズです。

于 2012-04-06T16:15:03.587 に答える
0

これを試してみてください

 <tr>
 <td valign="top" width=<%=width%>  align="center"  >
 <div id="loading" style="background:url(spinner.gif) no-repeat center center; width:16px;  height:16px;">
</div>
 </td>
 </tr>
于 2012-04-06T16:54:26.867 に答える
0

試してみてください - background-position: center; それはあなたが探していることをするはずです。

于 2012-04-06T16:11:32.930 に答える