在Safari

它必須是簡單的相對定位，這是我的CSS：在Safari

.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;」在小組和「位置：絕對;」在圖像打破它在FF和什麼也不做在Safari

這工作：

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

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

來源

2008-11-14 roman m

將.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-14 20:26:00

確保家長容器也被設置爲位置：相對並具有規定的高度，沒有它的位置不會正常工作。

.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-14 20:13:18 Mauro

在Safari中不起作用 – 2008-11-14 20:18:48

位置指定（相對或絕對）應該在兩個元素（父和子）中，否則子元素的定位不一定有效。你應該總是使用元素的相對位置，除非你指定像left這樣的精確位置：100px;頂部：100px。垂直對齊指的是元素本身，只涉及文本行中的位置。除非您更改它，否則行高與div高度不一樣。行高必須指定大於裏面的元素才能使vertical-align生效。

來源

2014-07-18 04:35:30 micaro

回答

相關問題