Problema di allineamento verticale delle celle della tabella

Question

Ho impostato float per una delle celle della mia tabella.Ma ora non posso cambiare l'allineamento verticale dei suoi contenuti.Per impostazione predefinita, sposta il contenuto all'inizio del div.Ho provato valign: middle, vertical-align: middle senza successo.Ecco i risultati:

Con float: left

Senza float: left

Come posso allineare verticalmente il contenuto della cella con il float? E il markup ha questo aspetto

<td id="top_logo">
    <a href="index.php">
        <img src="core/design/img/logo.png" style="height:40px; padding:3px;"/>
    </a>
</td>
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td>

Answer 1

Non so se questo sarà d'aiuto (ho lasciato indietro i layout basati su tabelle ora), ma per risolvere un problema simile usando divs diretto puoi fare lo stesso usando la regola line-height.

<div id="tableRow">
    <div id="leftCell"><img src="mylogo" /></div>
    <div id="middleCell">&nbsp;</div>
    <div id="rightCell">User Name Here</div>
</div>

Il tuo CSS verrebbe creato per impostare larghezze / altezze ecc., Che immagino non ti servirà per una tabella, e per il tuo "rightCell", dovresti impostare l'altezza della linea in modo che sia uguale all'altezza della riga:

#rightCell
{
    height: 30px;
    line-height: 30px;
}

Quello che succede è che il testo è centrato verticalmente nello spazio di riga, che poiché è uguale all'altezza, dà l'impressione che sia anche al centro dell'elemento.

Ora, come ho detto, non l'ho MAI provato su una cella di tabella, tuttavia qualsiasi browser moderno dovrebbe consentirti di modificare la proprietà di visualizzazione per dire block o inline-block utilizzando:

display: block;

Modifica del blocco per qualsiasi altro tipo, se necessario. Questo imposterà il tipo di visualizzazione della cella in modo che sia come un div (o uno span o qualche altro elemento) ma NON SO quale effetto avrà sulla tabella.

Nota anche che qui non sto parlando di browser meno recenti come IE6, per far funzionare tutto questo su tutta la linea potresti dover fare alcuni hack per i browser più vecchi se è richiesto il supporto.