¿Hay alguna manera (preferiblemente estable, no importa si es difícil de configurar, pero se olvida una vez hecho) para que Safari muestre las imágenes centradas?
Quiero decir, si está viendo una imagen www.blah.blah/blah.png(o .jpeg, o .svg, o cualquier imagen), Safari la alinea en la esquina superior izquierda. Me gustaría que estuviera centrado en la pantalla. ¿Es eso posible?
Sobre la base del comentario anterior de lhf , cuando ve una imagen en Safari, en realidad sigue siendo HTML debajo de la superficie, por lo que es posible aplicar una hoja de estilo personalizada. Esta declaración de estilo debería hacer lo que quieras. Lo he probado en Safari 6.
html > body > img:first-child:last-of-type { display: block; margin: 0 auto; }
Deberá guardar esa línea como un archivo con la extensión '.css', luego elegirlo a través de Preferencias de Safari → Avanzado → Configuración de hoja de estilo .
Esta es la lógica que usé para crear el código.
Si hay un elemento <img> que es:
- un elemento secundario directo de un elemento <body>, que a su vez es un elemento secundario directo de un elemento <html>
- el primer elemento dentro del elemento <body>
- el último elemento de ese tipo (es decir, <img>) dentro del elemento <body>
… luego céntrelo configurando los márgenes laterales para que se calculen automáticamente.
Es muy poco probable (aunque no imposible) que pueda encontrar una página con una sola imagen que resulte ser el primer elemento de la página, en cuyo caso esta regla también se aplicaría. Aparte de eso, debería funcionar como usted pretende.
gran inspiración No hay un complemento funcional para el último Safari y realmente lo necesito. También necesito la imagen centrada verticalmente, así que modifiqué la solución anterior para:
html > body > img:first-child:last-of-type {
position: fixed; /* works with absolute */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* translateY(-50%) */
max-width: 90%; /* related to it's container, not necessary, works with fixed */
max-height: 90%; /* related to it's container, not necessary, works with fixed */
}
en otras palabras, Safari apesta. Intenté usar CSS para centrar e imagen tanto vertical como horizontalmente en Safari y no funciona en un sitio receptivo. Sin embargo, funcionará bien en FF, IE, Opera y Chrome. Bueno, en realidad puedes centrar estáticamente una imagen en Safari, pero no podrá responder y escalar con el tamaño de la ventana y seguir siendo compatible con otros navegadores.
Si desea centrar genéricamente una imagen que no desea escalar, puede usar el siguiente css:
Fingiremos que la imagen tiene 200wx100h píxeles
<style type="text/css">
.exactCenter {
height:100px
width:200px;
position: fixed;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}
Los márgenes izquierdo y derecho son menos la mitad del ancho y el alto de su imagen. el Html en el Cuerpo se colocaría en un div con la clase ( .exactCenter):
<div class="exactCenter"><img src="img/your image.jpg" name="Logo" width="100%" id="Centered Image"></div>
Esto debería funcionar en Safari para centrar una imagen en la pantalla tanto horizontal como verticalmente.
izq.
Manuel