Solución:
Bueno, si elige el método de imagen de fondo, entonces es muy simple:
background: url(feed.png) left center no-repeat
La imagen se alinea con la línea base del texto, esto no incluye la altura del descendente que es el ‘tick’ en letras como go y.
Si se va a fijar la altura de la fila / celda, puede agregar la altura de la línea para que se centre verticalmente. Entonces, por ejemplo, asumiendo que su celda tiene 16 px de alto:
td.feed {
line-height:16px;
}
La otra opción sería agregar el ícono como imagen de fondo, agregando relleno a la izquierda de la celda:
td.feed {
background: transparent url(/wp-content/feed-icon-16x16.gif) no-repeat left center;
padding-left: 18px; /* width of feed icon plus 2px spacing */
}
El segundo significaría que podría eliminar la necesidad de tablas, ahora hay una idea …
Otras respuestas que afirman que la imagen no debe ser parte del contenido y es meramente decorativa, lo cual es discutible. Creo que deberías agregar un vacío alt atribuir a su imagen para que los lectores de pantalla puedan ignorar la imagen si decide mantener su método actual.
los vertical-align la propiedad es la que necesita usar aquí, pero lo que desea usar es text-bottom. También voy a asumir que quieres que este sea un enlace, así que aquí tienes un ejemplo de código completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>garethjmsaunders.co.uk</title>
<style type="text/css">
a { text-decoration: none; }
a img { border: 0; vertical-align: text-bottom; }
</style>
</head>
<body>
<table>
<tr>
<td>
<a href="" title="garethjmsaunders.co.uk rss feed">
<img alt="" src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif" />
My feed
</a>
</td>
</tr>
</table>
</body>
</html>
Si esto aún no es deseable, puede experimentar con line-height y otros valores para vertical-align para ver qué funciona mejor para ti.