allineamento verticale testo e immagine

[dogo21sob]

Ciao a tutti,
so che l'argomento è stato già trattato più volte ma tra le guide e le risposte agli altri quesiti non sono riuscito a trovare una soluzione al mio problema... io devo inserire in una sidebar n blocchi tutti uguali composti da immagine sulla sinistra, testo sulla destra e bordo inferiore tratteggiato. Il testo sulla destra deve essere allineato orizzontalmente a sinistra, con un pò di spazio dall'immagine e centrato verticalmente... quello che non riesco a fare è quest'ultima parte, centrare il testo verticalmente, tenendo presente che il testo può essere su più righe e di queste la prima deve avere un colore diverso, ma il tutto (immagine + testo) deve essere cliccabile... un casino insomma

questa è la parte di html:

<div id="comm">
    <ul>[*]<a href="#">[img]images/1.jpg[/img]<span>Prima riga</span>
Testo testo testo testo testo testo testo testo</a[*]<a href="#">[img]images/2.jpg[/img]<span>Prima riga</span>
Testo testo testo testo testo testo testo testo</a[/list]
</div>

questa la parte relativa al css:

#comm li {
    list-style: none;
    text-align: left;
    border-bottom: 2px dotted #999;
    height: 52px;
}

#comm li img {
    float:left; 
    margin-right:10px; 
}

#comm li a {
    color: #000;
}

#comm li a:hover {
    color: #999;
}

#comm li span {
    color: #999;
}

#comm li a:hover span {
    font-weight: bold;
}

Ditemi se c'è qualcosa di non chiaro o se sono proprio fuori strada...
grazie in anticipo

[Mich_]

Ti manca un contenitore in piu` per fare quello che chiedi:

<div id="comm">
    <ul>[*]<a href="#">
            [img]images/1.jpg[/img]
            <span class="boxino">
                <span class="priri">Prima riga</span>

                Testo testo testo testo testo testo testo testo
            </span>
        </a>[*]<a href="#">
            [img]images/2.jpg[/img]
            <span class="boxino">
                <span class="priri">Prima riga</span>

                Testo testo testo testo testo testo testo testo
            </span>
        </a>[/list]
</div>

Per il resto l'idea e` giusta, e mi pare che con questo aiuto riesci a risolvere da solo (naturalmente il boxino andra` posizionato assoluto - e di conseguenza il li avra` posizionamento relative)

[dogo21sob]

ho provato a fare come da te suggerito, modificando l'html come da te postato e inserendo nei css un float:left alla classe boxino e un clear:both a #comm li, ma non funziona. In particolare se non applico il float:left si vede come a prima, nel senso che il testo non viene centrato in verticale, quando applico il float si disallinea proprio tutto

[Mich_]

Attenzione che ho fatto una modifica al mio post, un paio di minuti dopo averlo postato. pare che tu abbia visto la prima versione.
(Non avevo interpretato che volevi centrare in verticale; poi ho corretto)

[dogo21sob]

ho dato position:absolute alla classe boxino e position:relative a #comm li, ma non è cambiato nulla... il blocco di testo (prima riga + altre righe) dovrebbe posizionarsi centralmente in verticale in base alla lunghezza del testo, ma non funziona... sta sempre allineato in alto... forse se riproduco solo questa parte su di una pagina e la metto online riusciamo a venirne a capo?

[Mich_]

Per centrare in verticale ci sono vari interventi nel forum.

Vedi ad esempio uno dei primi riferimenti tra i "link utili", o fa' una ricerca nel forum

[dogo21sob]

L'ho scritto proprio come introduzione nel primo messaggio, ho già letto alcune guide presenti sul sito e diversi interventi sul forum inerenti l'argomento, ma non sono riuscito a venirne a capo perchè tutti gli esempi trattati differiscono sempre di qualcosa con la mia struttura e quindi non riesco a riprodurre l'effetto desiderato...

[dogo21sob]

Alla fine l'unico modo in cui sono riuscito a sistemare è sostituendo il tuo span "boxino" con un div al quale ho assegnato display:table-cell e vertical-align:middle che ovviamente su ie6 non funzionerà ma se funziona almeno sugli altri è un grande risultato