Question

必须简单，这是我的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的页面顶部显示。

P.S。 “垂直对齐：中部;”也不起作用。

p.p.s。设置“position：relative;”在面板上不起作用，设置“position：relative;”在小组和“位置：绝对;”在图像上它在FF中打破它并在Safari中什么都不做

这就是工作：

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

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

Answer 1

将.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>

Answer 2

确保父容器也设置为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;

这将永远是中心。

Answer 3

位置规范（相对或绝对）应该在两个元素（父元素和子元素）中，否则子元素的定位不一定有效。您应该始终使用元素的相对定位，除非您指定左侧的确切位置：100px;上：100px。垂直对齐是指元素本身，仅涉及文本行中的位置。除非您更改行高，否则行高与div高度不同。必须将行高指定为大于内部元素才能使vertical-align生效。

Safari中的相对定位

3 个答案: