Obtuve un <td> donde dos imágenes() residen se muestran de la siguiente manera. Uno es mucho más alto que el otro. ¿Cómo dejo que el más corto se alinee con la parte superior de <td />?Cómo alinear verticalmente las imágenes en <td>
<td style="padding-left: 0px; cursor: pointer; vertical-align: top;">
<img width="85px" src=".../xyz.png"/>
<img src=".../icon_live.gif" /> // shorter one
</td>
Si usted da una clase a su <img class="tops"> entonces el CSS
.tops {
vertical-align: top;
}
se unirá el borde superior de las imágenes en la parte superior celda de la tabla.
Debe establecer la alineación vertical en las imágenes.
<style>
td img {
vertical-align: top;
}
</style>
añadir align="top" a la primera imagen (el alto)
<td style="padding-left: 0px; cursor: pointer; vertical-align: top;">
<img width="85px" src=".../xyz.png" align="top" />
<img src=".../icon_live.gif" /> // shorter one
</td>
Estoy bastante seguro de que tendrías que establecerlo en el más pequeño en lugar del más grande si solo configuras uno de ellos. –
probar este ..
<td cellpadding="0" valign="top">
<img width="85" src=".../xyz.png" style="display:inline;"/>
<img src=".../icon_live.gif" style="display:inline;" />
</td>
Esto hizo el trabajo para mí:
#logo-table td img, #logo-table td
{
vertical-align: middle;
}
En html:
<table id="logo-table">
<!--table contents with imgs-->
</table>
Hmm, la página de ejemplo que estoy viendo ahora difiere de tu código de muestra de dos maneras. Las etiquetas img tienen directivas 'height =' y el estilo se especifica como una clase. Ahora estoy probando entre navegadores ... – msw
Vaya, realmente quise decir el atributo de etiqueta 'img'. – msw