html - tener - Alineación de imagen y texto verticalmente dentro del elemento TD
tablas en html (9)
¿Qué hay de malo en convertirlo en una imagen de fondo?
.feed {
background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
padding-left: 16px;
}
<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
My feed
</td>
Así es como esto luce:
http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif Mi alimentación
El icono y el texto están mal alineados verticalmente. El icono está en la parte superior de la celda de la tabla, el texto está en la parte inferior. Tanto el texto como el ícono ocupan 16 píxeles, pero la celda aún se consume 19. ¿Cómo puedo alinearlos para guardar esos 3 píxeles?
La imagen se está alineando con la línea de base del texto, esto no incluye la altura del descensor que es el ''tic'' en la letra como g o y.
Si se va a arreglar la altura de la fila / celda, puede agregar altura de línea para que se centre verticalmente. Entonces, por ejemplo, suponiendo que tu celda tenga 16 píxeles de alto:
td.feed {
line-height:16px;
}
La otra opción sería agregar el ícono como imagen de fondo y agregar 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 simplemente para la decoración, que es discutible. Creo que deberías agregar un atributo alt vacío a tu imagen para que los lectores de pantalla puedan ignorar la imagen si eliges mantener tu método actual.
La propiedad de vertical-align es la que necesita usar aquí, pero lo que desea usar es text-bottom . También voy a suponer que quieres que esto sea un enlace, así que aquí hay 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 todavía no es deseable, puede experimentar con line-height y otros valores para vertical-align para ver qué funciona mejor para usted.
Podrías hacer una position: relative; top: 3px; position: relative; top: 3px; en la etiqueta <img> . También puedes probar vertical-align: middle; en la etiqueta <td> , pero no creo que funcione correctamente, ya que estoy bastante seguro de haberme encontrado antes. También podría ponerlos en etiquetas separadas <td> , pero eso es una especie de no-no.
Prueba esto:
<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
<span class="feedTxt">My feed</span>
</td>
.feedTxt { line-height: 20px; } /* Or whatever the height of the image is. Adjust as needed. */
Yo pondría los dos elementos (imagen y texto) en sus propias celdas de tabla separadas. Puedes anidar otra mesa. Ese es un buen lugar para comenzar. Entonces podrías jugar con relleno, etc. para ajustar.
<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>
simplemente pruebe "vertical-align: middle" en la etiqueta IMG, después de lo que también puede configurar el relleno para TD
Bueno, si eliges el método de la imagen de fondo, entonces es muy simple:
background: url(feed.png) left center no-repeat
Probé el método de la imagen de fondo pero no me gustó tanto como esto ...
En el CSS ...
.iconLabel {
position: relative;
top: -6px;
padding-left: 8px;
}
En la página ...
<td style="text-align:center;">
<a href="overview.cfm"
><img alt="Overview" src="Globe.png"
align="middle" border="0" height="60" width="60"
><span class="iconLabel">Overview</span
></a>
</td>
- Juega con el atributo "arriba" para mover el texto / etiqueta arriba y abajo.
- Juega con el atributo de relleno para cambiar el espacio horizontal entre el icono y el texto / etiqueta.
- Debe verificarlo en todos los navegadores que le preocupen, ya que pueden aparecer con ligeras diferencias.