Imágenes centradas en un safari

Sobre la base del comentario anterior de lhf , cuando ves 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 debe 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 las Preferencias de Safari → Avanzadas → hoja de estilo configuración.

Aquí está la lógica que solía crear con el código.

  

Si hay un < img > elemento que es:

     

• un hijo directo de un < body > Elemento, que es en sí mismo un hijo directo de un < html > elemento
  
• el primer elemento dentro de < body > elemento
  
• el último elemento de ese tipo (es decir, < img >) dentro de la etiqueta < body > elemento
  

... luego céntrelo centrando los márgenes laterales para que se calculen automáticamente.

Es muy improbable (aunque no imposible) que pueda encontrar una página con solo una imagen en ella, que es 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 que la imagen esté 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. He intentado usar CSS para centrar e imágenes 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 puede centrar estáticamente una imagen en Safari, pero no podrá ser receptivo 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 quiere escalar, puede usar el siguiente css:

Fingiremos que la imagen es de 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 alto de tu 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 pantalla tanto horizontal como verticalmente.