Imagen de posicionamiento alt text

Question

Tengo una gran tabla con un gran número de entradas que corresponden a un número igualmente grande de imágenes. El requisito es mostrar un texto alternativo para cada imagen que no se pudo encontrar en el servidor. El atributo alt de está funcionando bien.

Sin embargo, no puedo ubicar el texto alternativo: el relleno de celda, el espaciado, los márgenes, etc. que se aplican a la imagen no parecen aplicarse al texto alternativo.

Puede ser relevante que estemos usando tablas para el diseño de la página.

¿Alguien sabe un método para colocar el texto alternativo?

Answer 1

img { 
    width: 100px; 
    height: 50px; 
    line-height: 50px; 
    text-align: center; 
} 

Establece la alineación horizontal y vertical alterna en el centro.

Answer 2

No puede. Ningún navegador que conozco permite diseñar la representación del atributo alt.

Parece más sensato utilizar un lenguaje del lado del servidor (por ejemplo, PHP) para componer la página en lugar de forzar a cada navegador a solicitar imágenes potencialmente inexistentes. De esta forma, puede generar una etiqueta <img> o un párrafo normal según la imagen que exista.

También podría escribir una función de JavaScript (adjunta al evento onerror de la etiqueta <img>) que la reemplaza con un texto normal.

Answer 3

¿Intentó aplicar relleno o margen al img mismo y no a la celda de la tabla? El CSS que usa en su elemento IMG también se aplica al texto alternativo de la imagen. Así que si establece un

img { padding-left:30px; } 

su texto alternativo también ser empujado hacia la derecha por 30px (dependiendo de text-align y otras cosas). También le conviene posicionar: relativa a img o vertical-alinearla con una celda contigua (la relación es importante) o simplemente algo similar como flotar, pero cuidar es porque arrastrará la imagen fuera del flujo de texto donde pierde el aspecto de diseño de las relaciones entre padres e hijos. Hay un bonito resource para estilos CSS. No creo que necesites nada como JavaScript (jQuery) o algo así.

Answer 4

altura de línea en un elemento primario afectará la presentación de texto alternativo.

Answer 5

Si desea que la imagen que se va arriba a la izquierda, pero alineado el texto alternativo centrado esto no funcionará, pero si tanto el texto de la imagen y alt debe estar alineada centrada:

intentar omitir la height y width atributos en la imagen (si los está incluyendo en este momento). Esto debería hacer que un cuadro delimitador sea tan grande como sea necesario para el texto alternativo, que puede alinearse en el centro verticalmente y alinearse en el medio del texto. Dependiendo de cómo quieras que se vea tu diseño, puedes jugar con él hasta que tanto el texto como la imagen se vean decentes. Eso es lo mejor que puedes hacer, realmente.