2

シンプルである必要があります。これが私のCSSです。

.progressImage 
{
  position:relative;
  top:50%;
}

.progressPanel
{
height:100%;
width:100%;
text-align:center;
display:none;
}

<asp:Panel ID="pnlProgress" runat="server" CssClass="progressPanel">
<asp:Image ID="Image1" runat="server" CssClass="progressImage" ImageUrl="~/Images/Icons/loading.gif" />
</asp:Panel>

ユーザーの操作に応じてパネル表示を切り替えます。

FireFoxでうまく機能しますが、Safariではページの上部に表示されます。

ps "vertical-align：middle;" どちらも機能しません。

pps設定「position：relative;」パネルの「position：relative;」を設定しても機能しません。パネル上と「position：absolute;」画像上でFFでそれを壊し、Safariでは何もしません

これはうまくいきました：

.progressPanel
{
  height:100%;
  width:100%;
  position:relative;
}

.progressImage
{
  position:absolute;
  top:50%;
  left:50%;
}
4

3 に答える 3

3

.progressPanelの位置を相対に設定し、の位置.progressImageを絶対に設定します。以下はFF、IE、Safariで動作します。完全な中央揃えを実現するには、負の余白を画像の幅/高さの半分に設定します。progressPanelの一部の親（この場合はbody）には、progressPanelがそれを満たすことができるように高さが必要であることに注意してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        body {
          height:700px;
        }
        .progressImage {
          position:absolute;
          top:50%;
          left:50%;
          margin-left:-16px;
          margin-top:-16px;
        }

        .progressPanel {
          position:relative;
          height:100%;
          width:100%;
          text-align:center;
          background:red;
        }
        </style>
    </head>
    <body>
    <div class="progressPanel"><img class="progressImage" src="pic.jpg"/></div>
    </body>
</html>
于 2008-11-14T20:26:00.177 に答える
1

親コンテナもposition：relativeに設定され、高さが指定されていることを確認してください。これがないと、位置は正しく機能しません。

.progressPanel
{
    height:100%;
    width:100%;
    text-align:center;
    display:none;
    position: relative;
}

または、パネルのbackgroundプロパティをgifに設定してみませんか？

background: url('path/to/image.gif') no-repeat center middle;

それは常に中心になります。

于 2008-11-14T20:13:18.940 に答える
1

位置の指定 (相対または絶対) は、両方の要素 (親と子) で行う必要があります。そうしないと、子要素の配置が必ずしも機能しません。left: 100px; のように正確な位置を指定しない限り、要素には常に相対位置を使用する必要があります。上：100px。Vertical-align は要素自体を参照し、テキスト行の位置のみに関係します。変更しない限り、行の高さは div の高さと同じではありません。vertical-align を有効にするには、line-height を内部の要素よりも大きく指定する必要があります。

于 2014-07-18T04:35:30.517 に答える