• C
    User Attivo •

    Testo allineato a destra con immagine a sinistra

    Ciao a tutti!
    Devo realizzare una cosa che secondo me è abbastanza banale ma io non ne sono in grado.. Ho da poco iniziato a cimentarmi con i CSS 😞
    Vorrei fare in modo che in una cella di una mia tabella compaiano un testo piccolino, allineato a destra nella cella, con un'immagine alla sua sinistra.
    Il problema è che il testo cambia ogni giorno e l'immagine dovrebbe spostarsi a seconda della lunghezza del testo (è solo 1 riga).
    L'immagine è alta 16 px e il testo dovrebbe essere allineato al centro rispetto ad essa in verticale.
    Qualcuno mi può aiutare?
    Grazie
    Cecco

    0
  • M
    User Attivo •

    allineare la foto e il testo = float nel css...

    Il problema è che il testo cambia ogni giorno e l'immagine dovrebbe spostarsi a seconda della lunghezza del testo (è solo 1 riga).

    ma se l'im è a sinistra..rimane li...

    L'immagine è alta 16 px e il testo dovrebbe essere allineato al centro rispetto ad essa in verticale.

    in questo caso forse hai bisogno di un padding top...

    0
  • M
    User Attivo •

    Se il testo cambia ogni giorno, ma rimane sempre e solo su una riga puoi usare il padding top come dice misterwo, se il testo va su più righe bisogna pensare a qualcosa di dinaico. Una domanda: la tabella nella quale è inserito l'impianto è una tabella che contiene dati o una tabella di struttura grafica?

    0
  • K
    Super User •

    Se è una struttura grafica potresti inserire tutto questo all'interno di un paragrafo e fare così:

    es HTML:

    [html]<p>
    <img src="pathimmagine/immagine.jpg" alt="la tua immagine" />
    Testo allineato con la tua immagine
    </p>
    [/html]CSS

    
p img{
vertical-align:middle;
float:left;
}

```Tramite l'attributo "**vertical-align:middle;**" lasci che la tua immagine si centri con il testo e allo stesso tempo farai in modo che questa rimanga perennemente sulla sinistra.
Magari puoi aggiungere anche un "**padding**" tra gli attributi sopra citati in modo da distanziare l'immagine dal testo.

**Mi raccomando
**Dando come attributo il "**float:left;**" all'immagine *la estrapoli dal flusso* del suo genitore.
Dovresti dare al tuo "p" (paragrafo) lo stesso "**float:left;**"  , o dargli una dimensione (almeno minima) alta almeno quanto la stessa immagine o ancora inserire al suo interno un elemento che "fixi" il tutto tramite l'attributo "**clear:both;**".
    0
Effettua l'accesso per rispondere