C'è un modo (preferibilmente stabile - non importa se è difficile da configurare - ma te ne dimentichi una volta fatto) per fare in modo che Safari visualizzi le immagini centrate?
Voglio dire, se stai visualizzando un'immagine www.blah.blah/blah.png (o .jpeg , o .svg , o qualsiasi immagine), Safari lo allinea nell'angolo in alto a sinistra. Mi piacerebbe che fosse centrato sullo schermo. È possibile?
Basandosi sul commento di lhf qui sopra, quando si visualizza un'immagine in Safari è in realtà ancora HTML sotto la superficie, quindi è possibile applicare un foglio di stile personalizzato. Questa dichiarazione di stile dovrebbe fare ciò che vuoi. L'ho provato in Safari 6.
html > body > img:first-child:last-of-type { display: block; margin: 0 auto; }
Devi salvare la riga come file con estensione ".css", quindi selezionarla tramite Preferenze di Safari Avanzate → foglio di stile impostazione.
Ecco la logica con cui ho creato il codice.
If there is an <img> element that is:
- a direct child of a <body> element, which is itself a direct child of an <html> element
- the first element within the <body> element
- the last element of that type (i.e. <img>) within the <body> element
…then center it by setting the side margins to be calculated automatically.
È molto improbabile (anche se non impossibile) che si possa incontrare una pagina con solo un'immagine su di essa che sembra essere il primo elemento della pagina, nel qual caso si applicherebbe anche questa regola. Oltre a questo dovrebbe funzionare come vuoi.
grande ispirazione. Non c'è un plug-in funzionale per l'ultimo Safari e ne ho davvero bisogno. Ho bisogno che l'immagine sia centrata verticalmente, quindi ho modificato la soluzione di cui sopra in:
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 */
}
in altre parole Safari fa schifo. Ho provato a utilizzare i CSS per centrare e immagini sia verticalmente che orizzontalmente in Safari e non funziona in un sito reattivo. Funzionerà comunque in FF, IE, Opera e Chrome. Beh, in realtà puoi centrare staticamente un'immagine in Safari, ma non sarà in grado di essere reattiva e scalare con le dimensioni della finestra ed essere comunque compatibile con altri browser.
Se vuoi centrare genericamente un'immagine che non vuoi scalare, puoi usare il seguente css:
Faremo finta che l'immagine sia 200wx100h pixel
<style type="text/css">
.exactCenter {
height:100px
width:200px;
position: fixed;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}
I margini sinistro e destro sono meno la metà della larghezza e dell'altezza dell'immagine. l'Html nel corpo verrebbe inserito in un div con la classe ( .exactCenter ):
<div class="exactCenter"><img src="img/your image.jpg" name="Logo" width="100%" id="Centered Image"></div>
Questo dovrebbe funzionare in Safari per centrare un'immagine sullo schermo sia orizzontalmente che verticalmente.