Positionnement relatif dans Safari

Il doit être simple, voici mon CSS:Positionnement relatif dans 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>

I bascule l'affichage du panneau en fonction de l'action de l'utilisateur. Fonctionne bien dans FireFox, mais apparaît en haut de la page dans Safari.

p.s. "vertical-align: middle;" ne fonctionne pas non plus.

p.p.s. réglage "position: relative;" sur le panneau ne fonctionne pas, réglage "position: relative;" sur le panneau et "position: absolute"; sur l'image il se brise FF et ne fait rien dans Safari

CE TRAVAILLE:

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

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

Source

2008-11-14 roman m

Définissez la position .progressPanel sur relative, et la position .progressImage sur absolue. Les travaux suivants pour moi dans FF, IE, Safari. Réglez les marges négatives à la moitié de la largeur/hauteur de votre image pour un centrage parfait. Notez que certains parents du progressPanel (corps dans ce cas) ont besoin d'une hauteur pour que le progressPanel puisse le remplir.

<!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>

Source

2008-11-14 20:26:00

Assurez le conteneur des parents est également réglé sur la position: relative et a une hauteur spécifiée, sans elle la position wont fonctionne correctement .

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

Sinon, pourquoi ne pas définir la propriété d'arrière-plan du panneau sur votre gif?

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

Ce sera toujours centré.

Source

2008-11-14 20:13:18 Mauro

ne fonctionne pas dans Safari –

spécification de position (relative ou absolue) doit être dans les deux éléments (parents et enfants) sinon le positionnement de l'élément enfant ne fonctionne pas nécessairement. Vous devriez toujours utiliser le positionnement relatif pour un élément sauf si vous spécifiez la position exacte comme left: 100px; haut: 100px. Vertical-align fait référence à l'élément lui-même et ne concerne que la position dans la ligne de texte. La hauteur de ligne n'est pas la même que la hauteur div sauf si vous la modifiez. La hauteur de ligne doit être spécifiée plus grande que les éléments à l'intérieur pour obtenir l'effet d'alignement vertical.

Source

2014-07-18 04:35:30 micaro

Positionnement relatif dans Safari

Répondre

Questions connexes