Allineamento immagini e testo

[senza nick]

Salve a tutti, non riesco ad allineare le immagini con a fiano il testo.

Il container è 100% e mi serve che le immagini siano tutte a sinistra a circa 50/60 px dal margine e di fianco sempre a circa 50 px il testo.




<a href="http://nomesito.com"><div><img src="img/immagine.png" style="float:left"; margin=50px 20px 50px 20px"; vertical-align:"middle"; alt="" /></div><font face="Verdana" size="2" >Testo 1</font></a>

<a href="http://nomesito.com"><div><img src="img/immagine2.png" style="float:left"; margin=50px 20px 50px 20px"; vertical-align:"middle"; alt="" /></div><font face="Verdana" size="2">Testo 2</font></a>

<a href="http://nomesito.com"><div><img src="img/immagine3.png" style="float:left"; margin=50px 20px 50px 20px"; vertical-align:"middle"; alt="" /></div><font face="Verdana" size="2">Testo 3</font></a>

<a href="http://nomesito.com"><div><img src="img/immagine4.png" style="float:left"; margin=50px 20px 50px 20px"; vertical-align:"middle"; alt="" /></div><font face="Verdana" size="2">Testo 4</font></a>


Per togliere la sottolineatura del link al testo devo usare questo codice: text-decoration: none; Dove devo posizionarlo?

Ogni immagine con testo deve essere una sopra l'altra.

Grazie.

[Vincent.Zeno]

ciao, ci diversi errori di base in quello che hai scritto.

la questione è risolvibile in due tre modi diversi...
puoi postare un'immagine di quello che vuoi ottenere, così che si possa aiutarti più facilmente?

[senza nick]

Ciao Vincent, grazie per la risposta.

Il risultato finale è quello dell'immagine del link.


https://preview.ibb.co/doggS0/BOX.png


Mi sono dimenticato di mettere l'ombreggiatura. Ho messo tre opzione per decidere poi quale soluzione mi potrà piacere di piu.
La terza opzione ha gli angoli tondeggianti.

Praticamente vorrei creare dei bottoni.

Grazie ancora e buona giornata.

[Vincent.Zeno]

una cosa del genere dovrebbe darti sufficiente spunto:

CSS
div.similbutton {
    border:10px solid #4F81BD;
    border-radius:6px;
    font-size:80px;
    width:95%;
    margin:auto;
    overflow:auto;
}

a.block { display:block;
    color:black;
    vertical-align:middle;
    text-decoration:none;
}
a.block img {
     margin:0px 20px 0 50px;
     height:80px;
     width:150px;
     float:left;
}

HTML
<div class="similbutton" >
<a class="block" href="" >
    <img src="..." style="">Testo</a>
</div>

edit
ricorda di racchiudere il codice postato sempre all'interno del tag CODE, grazie

[senza nick]

Ciao Vincent, grazie per la risposta.

questo è il risultato:

https://preview.ibb.co/bYEMef/Immagine.png

Ci sono alcuni problemi; lo spazio tra un bottone e l'altro e la bandiera che non è al centro del bottone.

Vorrei provare il codice per avere il risultato dell'esempio 2 dell'immagine precedente, con il bordo sopra/sinistra fino e in basso/destra largo con gli angoli quadrati.

Il resto va molto bene.

Grazie mille e buona serata

[Vincent.Zeno]

potresti metterci mano anche tu, visto che ti ho dato una buona base di partenza

se l'immagine sta al centro poi il testo sta più versa dx, ti va bene?

[Vincent.Zeno]

CSS
div.similbutton {
    border-top:1px solid #4F81BD;
    border-right:10px solid #4F81BD;
    border-bottom:10px solid #4F81BD;
    border-left:1px solid #4F81BD;
    text-align:center;
    font-size:80px;
    width:95%;
    margin:auto auto 20px;
    overflow:auto;
}

a.block { display:block;
    color:black;
    vertical-align:middle;
    text-decoration:none;
}
a.block img {
     height:80px;
     width:150px;
}

HTML
<div class="similbutton" >
<a class="block" href="" >
    <img src="..." >Testo</a>
</div>
<div class="similbutton" >
<a class="block" href="" >
    <img src="..." >Testo</a>
</div>

[senza nick]

Ciao Vincent, semplicemente non so come risolvere i problemi.

L'immanine centrata intendevo verticalmernte, è attaccata al bordo superiore.

Un altro problema, sul cell il risultato è quello dell'immagine del link di seguito

https://preview.ibb.co/n81SPq/1.jpg

non si adatta alla larghezza del cell, dovrebbe essere tutto in una linea e ridimensionato.

Non ho la minima idea di come farlo adattare.

Grazie per il disturbo.

Buona serata.

[Vincent.Zeno]

"fartelo" è lavoro

aiutarti, anche con esempi praticamente finiti, sta bene.
ma tu devi metterci del tuo. altrimenti non tornano i conti di un forum di auto-aiuto reciproco.