Positioning image alt text

Question

Hi Guys,

I have a large table with a large number of entries corresponding to an equally large number of images. The requirement is to display an alt text for every image which could not be found on the server. The alt attribute of is working fine.

However, I am not able to position the alt text - cell padding, spacing, margins etc. which apply to the image do not seem to apply to the alt text.

It may be of relevance that we are using tables for the layout of the page.

Does anybody know a method to position the alt text?

Answer 1

img {

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

}

sets the alt vertical and horizontal align to middle.

Answer 2

Off the top of my head I would not use alt-text, but a floating div tag which could be applied programmatically to do the job. That way you have complete control of the layout, colour, positioning etc...

Answer 3

You cannot. No browser I'm aware of allows to style the representation of the alt attribute.

It looks more sensible to use a server side language (e.g. PHP) to compose the page rather than forcing each browser to request potentially non-existing images. This way you can just output an <img> tag or a regular paragraph depending on whether the picture exists.

You could also write a JavaScript function (attached to the onerror event of the <img> tag) that replaces it with a regular text.

Answer 4

Did you try to apply padding or margin to the img itself and not to the table-cell? The CSS you use on your IMG Element is also applied to the alt-text of the image. So if you set a

img { padding-left:30px; }

your alt-text is also getting pushed to the right by 30px (depending on text-align and other stuff). You may also want to position:relative the img or vertical-align it with a neighbor-cell (the relation is important) or just something similar like float but take care of is because it will drag the image out of the textflow where it loses the layout-aspekt of parent-to-child relations. There is a nice resource for CSS Styles. I don't think you need anythink like Javascript (jQuery) or something like that.

Answer 5

line-height on a parent element will affect the presentation of alt text.

Answer 6

If you want the image to be top-left aligned but the alt text centered this won't work, but if both the image and alt text should be aligned centered:

Try leaving out the height and width attributes in the image (if you're including them right now). That should render a bounding box only as big as necessary for the alt text, which can be center aligned vertically and text-aligned middle. Depending on what you want your layout to look like you can fiddle around with it until both the alt text and image looks decent. That's about the best you can do, really.