css - Posicionamiento relativo en Safari
css browser compatibility (3)
Asegúrese de que el contenedor de los padres también está configurado en posición: relativo y tiene una altura especificada, sin él la posición no funcionará 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.
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>
Alterno la visualización del panel dependiendo de la acción del usuario.
Funciona muy bien en Firefox, pero aparece en la parte superior de la página en Safari.
ps "vertical-align: middle;" tampoco funciona
pps que establece "posición: relativa"; en el panel no funciona, estableciendo "posición: relativa;" en el panel y "posición: absoluta"; en la imagen lo rompe en FF y no hace nada en Safari
ESTO TRABAJÓ:
.progressPanel
{
height:100%;
width:100%;
position:relative;
}
.progressImage
{
position:absolute;
top:50%;
left:50%;
}
Establezca la posición de .progressPanel en relativa, y la posición de .progressImage en absolute. Lo siguiente me funciona en FF, IE, Safari. Establezca los márgenes negativos en 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 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>
La especificación de posición (relativa o absoluta) debe estar en ambos elementos (padre e hijo); de lo contrario, el posicionamiento del elemento secundario no necesariamente funciona. Siempre debe usar el posicionamiento relativo para un elemento a menos que especifique la posición exacta como izquierda: 100px; arriba: 100px. Vertical-align se refiere al elemento en sí y concierne solo a la posición en la línea de texto. La altura de la línea no es lo mismo que la altura del div a menos que la cambie. La altura de línea debe especificarse más grande que los elementos internos para obtener un efecto de alineación vertical.