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“垂直对齐：中间；” 也不行。

pps设置“位置：相对；” 面板上不起作用，设置“位置：相对；” 在面板上和“位置：绝对；” 在图像上打破它在 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 的某些父级（在本例中为主体）需要一个高度，以便 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;
}

或者，为什么不将面板的背景属性设置为您的 gif？

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

这将始终居中。

于 2008-11-14T20:13:18.940 回答
1

位置规范（相对或绝对）应该在两个元素（父元素和子元素）中，否则子元素的定位不一定有效。您应该始终对元素使用相对定位，除非您指定确切的位置，例如 left: 100px; 顶部：100 像素。Vertical-align 是指元素本身，仅涉及文本行中的位置。除非你改变它，否则 line-height 与 div height 不同。line-height 必须指定大于内部元素才能使垂直对齐生效。

于 2014-07-18T04:35:30.517 回答