html - propiedad - incluir el atributo alt con un texto alternativo que explique la función de la imagen

Posicionamiento de imagen alt texto

Question

Tengo una tabla grande 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 pueda encontrar en el servidor. El atributo alt de está funcionando bien.

Sin embargo, no puedo colocar el texto alternativo: el relleno de celdas, 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

¿Intentaste aplicar el relleno o el margen al img en sí y no a la tabla-celda? El CSS que utiliza 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 se está empujando hacia la derecha 30px (dependiendo de la alineación del texto y otras cosas). También es posible que desee posicionar: relativo al img o alinearlo verticalmente con una celda vecina (la relación es importante) o simplemente algo similar como flotar, pero cuidar es porque arrastra la imagen fuera del flujo de texto donde pierde El aspecto de la disposición de las relaciones padre-hijo. Hay un buen resource para los estilos CSS. No creo que necesites nada como JavaScript (jQuery) o algo así.

Answer 2

No se 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 obligar a cada navegador a solicitar imágenes potencialmente inexistentes. De esta manera, solo puede generar una etiqueta <img> o un párrafo regular dependiendo de si existe la imagen.

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

Answer 3

Si desea que la imagen se alinee en la parte superior izquierda pero el texto alt centrado, esto no funcionará, pero si tanto la imagen como el texto alt deberían estar alineados:

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

Answer 4

line-height en un elemento padre afectará la presentación del texto alternativo.

Answer 5

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

Establece la alineación vertical y horizontal alt al medio.