Posicionamiento relativo en Safari

StackOverflow https://stackoverflow.com/questions/291189

Pregunta

Tiene que ser simple, aquí está mi 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>

Alternar la visualización del panel según la acción del usuario.

Funciona muy bien en Firefox, pero aparece en la parte superior de la página en Safari.

p.s. " vertical-align: middle; " tampoco funciona

p.p.s. ajuste " posición: relativa; " en el panel no funciona, estableciendo " position: relative; " en el panel y " posición: absoluta; " en la imagen lo rompe en FF y no hace nada en Safari

ESTA FUNCIONÓ: 

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

.progressImage
{
  position:absolute;
  top:50%;
  left:50%;
}
¿Fue útil?

Solución

Establezca la posición de .progressPanel en relativa, y la posición de .progressImage en absoluto. Lo siguiente funciona para mí en FF, IE, Safari. Establezca los márgenes negativos a la mitad del ancho / alto de su imagen para un centrado perfecto. Tenga en cuenta que algunos padres del progressPanel (cuerpo en este caso) necesitan una altura para que el progressPanel pueda llenarlo. 

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

Otros consejos

Asegúrese de que el contenedor de los padres también esté en posición: relativo y tenga una altura especificada, sin que la posición no funcione correctamente. 

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

alternativamente, ¿por qué no establecer la propiedad de fondo del panel en tu gif? 

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

Eso siempre estará centrado.

La especificación de posición (relativa o absoluta) debe estar en ambos elementos (padre e hijo) de lo contrario, el posicionamiento del elemento hijo no necesariamente funciona. Siempre debe usar el posicionamiento relativo para un elemento a menos que especifique la posición exacta como left: 100px; Tapa: 100px. La alineación vertical se refiere al elemento en sí y solo se refiere a la posición en la línea de texto. La altura de línea no es lo mismo que la altura div a menos que la cambie. La altura de línea debe especificarse más grande que los elementos en el interior para que la alineación vertical tenga efecto.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top