Centrare un'immagine 
Autor: Luigi Dell'aquila
Besucht 1682,
Followers 2,
Geteilt 0
Ciao a tutti.
Utilizzando la riga di codice in calce riesco a rendere responsive l'immagine e cambiando il valore di float da right a left l'immagine va a destra o a sinistra. Perchè con "center" non funziona? Quale valore devo inserire per centrare l'immagine?
Grazie
<img style="height: auto; max-width: 100%; float: left; margin: 10px 20px 10px 20px; border: none;"
Gepostet am
... cosa intendi per centrare? ...visto che con width al 100% occuperebbe tutto lo spazio orizzontale...?...
... eventualmente prova con gli allineamenti previsti nelle opzioni della cella contenitore...
... posta link e stamp a chiarimento...
.
Autor
E' sempre per pagine esterne da inserire negli iframe di website.
Nell'esempio pur avendo inserito center in float, l'immagine non viene centrata.
http://www.luigidellaquila.it/news/2.html
Invece qui usando <p align = "center";> viene centrata
http://www.luigidellaquila.it/news/centrata.html
...questo avviene perché i valori ammessi per float, sono: left, right e none; center non è contemplato...
... prova ad inserirlo dentro un DIV_CUSTOM, in questo modo:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>prova immagine centrata</title>
</head>
<body>
<div style="width:100%, text-align:center" >
<img src="http://www.luigidellaquila.it/news/05-akita_inu.jpg" width=100% >
</div>
</body>
</html>
.....................
... oppure, se vuoi un margine, così:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>prova immagine centrata</title>
</head>
<body>
<div style="width:100%, text-align:center;padding:50px" >
<img src="http://www.luigidellaquila.it/news/05-akita_inu.jpg" width=100% >
</div>
</body>
</html>
.
le proprietà di float non prevedono il valore "center"...
http://www.w3schools.com/cssref/pr_class_float.asp
per questo non ti funziona...
none... left... right... initial... inherit... sono i valori utilizzabili...
Autor
@kolasim ho provato come dici, ma ora l'immagine è a tutta pagina.
http://www.luigidellaquila.it/news/2.html
Grazie a Scheggia e Gabriele, infatti non mi spiegavo perchè float con center non funzionava.
Autor
Cercando su internet ho trovato questo codice da inserire e sembra funzionare. E' obsoleto oppure va bene?
<style type="text/css">
.centro {
display:block;
margin:0px auto;
text-align:center;
}
</style>
http://www.luigidellaquila.it/news/3.html
... ma se la richiami in IFRAME si adatterebbe...
... comunque non hai visto il secondo codice cliccando su Mostra più ... del mio precedente post...
... lì è proposto il padding, ma se vuoi un adattamento (resize) ed una cornice proporzionale alla finestra ospite, sostituiscilo per esempio con margin:5%
... provalo...
.
Autor
@Kolasim: infatti non avevo visto il secondo codice. L'ho provato è funziona soltanto che invece di width:100% devo inserire max-width:100% altrimenti l'immagine occupa tutta la pagina.
Autor
http://www.luigidellaquila.it/news/kolas.html
... non mi sembra regolare l'effetto che ottieni adesso...
... prova aggiungendo background-color:red per vedere cos'è che accade...
... quel max-width corrisponde sempre a tutta pagina per il DIV meno il margine...
... non ho capito se l'immagine si deve ridimensionare o meno, nel tuo esempio no!...
... ma, nel mio precedente codice hai provato a variare solo il valore percentuale, da 5% per esempio in 10% e così via...?...
... secondo me dovresti ottenere il risultato più adatto, ma certamente dipende da ciò che realmente vorresti ottenere
.
Autor
Si l'immagine si deve ridimensionare. Con il tuo esempio funziona, però l'immagine, come ti ho detto occupa tutta la pagina.
Ho provato a variare la percentuale ed ecco cosa succede
http://www.luigidellaquila.it/news/kolas.html
Autor
Ho inserito un altro tag all'inizio con div align="center" , max-width:100% e heigth:auto ed è quello che volevo. Immagine centrata e responsive.
Secondo voi può andare bene o potrebbe dare problemi con qualche browser?
direi che va bene....il background lo puoi togliere, non serve a niente, rimane nascosto dall'immagine...ti basta:
height: auto; max-width: 100%;