Problema de alineación vertical de celdas de tabla

Question

Configuré flotador para una de las celdas de mi tabla.Pero ahora no puedo cambiar la alineación vertical de su contenido.De forma predeterminada, mueve el contenido a la parte superior de la div.Lo intenté valign: middle, vertical-align: middle sin éxito.Aquí están los resultados:

Con float: left

Sin float: left

¿Cómo puedo alinear verticalmente el contenido de la celda con flotador?Y el marcado se ve así

<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

No sé si esto ayudará (ahora dejé atrás los diseños basados ​​en tablas), pero para resolver un problema similar usando directamente divPuedes hacer lo mismo usando el line-height regla.

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

Su CSS se crearía para establecer anchos/altos, etc., lo cual supongo que no necesitará para una tabla, y para su "celda derecha", establecería la altura de la línea para que sea la misma que la altura de la fila:

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

Lo que entonces sucede es que el texto está centrado verticalmente en el espacio de línea, lo que debido a que es igual a la altura, da la impresión de que también está en el centro del elemento.

Ahora, como digo, NUNCA he probado esto en una celda de tabla, sin embargo, cualquier navegador moderno debería permitirle cambiar la propiedad de visualización para decir block o inline-block usando:

display: block;

Cambio de bloque para cualquiera de los otros tipos cuando sea necesario.Esto configurará el tipo de visualización de la celda para que sea como un div (o un lapso, o algún otro elemento) pero NO SÉ qué efecto tendrá en la mesa.

Tenga en cuenta también que aquí no me refiero a navegadores más antiguos como IE6; para que esto funcione en todos los ámbitos, es posible que deba realizar algunos trucos para navegadores más antiguos si se requiere soporte.