Problème d'alignement vertical des cellules de table

Question

J'ai défini Float pour l'une des cellules de ma table. Mais maintenant, je ne peux pas changer l'alignement vertical de son contenu. Par défaut, il déplace le contenu vers le haut du div. j'ai essayé valign: middle, vertical-align: middle sans succès. Voici les résultats:

Avec float: left

Sans pour autant float: left

Comment puis-je aligner le contenu de la cellule verticalement avec Float? Et le balisage ressemble à ça

<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

Je ne sais pas si cela aidera (j'ai laissé des dispositions basées sur des tableaux maintenant), mais pour résoudre un problème similaire en utilisant directement divs vous pouvez faire de même en utilisant le line-height régner.

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

Votre CSS serait créé pour définir des largeurs / hauteurs, etc., ce que je suppose que vous n'aurez pas besoin pour une table, et pour votre "lightcell", vous définissez la hauteur de la ligne pour être la même que la hauteur de la ligne:

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

Ce qui se passe alors, c'est que le texte est centré verticalement dans l'espace de ligne, ce qui, parce que c'est la même chose que la hauteur, donne l'impression qu'il est également au centre de l'élément.

Maintenant, comme je le dis, je n'ai jamais essayé ceci sur une cellule de table, mais tout navigateur moderne devrait vous laisser changer la propriété d'affichage pour dire block ou inline-block utilisant:

display: block;

Changer de bloc pour l'un des autres types si nécessaire. Cela définira le type d'affichage de la cellule comme un div (ou une portée, ou un autre élément) Mais je ne sais pas quel effet cela aura sur la table.

Notez également que je ne m'adresse pas aux navigateurs plus âgés comme IE6 ici, pour faire fonctionner cela à tous les niveaux, vous devrez peut-être faire des hacks pour les navigateurs plus âgés si le support est requis.