Positioning image alt text

Question

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?

score 32 · Accepted Answer · edited Apr 24 '14 at 16:37

32

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

Sets the alt vertical and horizontal align to middle.

edited Apr 24 '14 at 16:37

Uyghur Lives Matter

18,820
42
108
144

answered Jul 31 '09 at 11:52

Mike

1,825
3
21
26

1

... even if the image does exist. – Álvaro González Jul 31 '09 at 11:58
line-height moved the alt text while image positioning was not changed. Thanks :) – KJ Saxena Aug 01 '09 at 05:20
1

if the alt text is multi-line then it would look bad or overflow – aleation Sep 16 '13 at 10:09
9

Interesting, it doesn't work but marked as an answer – X-HuMan Aug 22 '14 at 14:43
2

I see this answer everywhere on the internet but it doesn't work. Is this because browsers have changed since 2014? Or is it only me who can't get it running? – Fred Nov 17 '20 at 21:32

score 4 · Answer 2 · answered Jan 21 '22 at 22:20

4

img { 
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  }

answered Jan 21 '22 at 22:20

Ismat

41
1

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 22 '22 at 00:43
This works, but I'm wondering if setting img `display` to `flex` is a good idea or not. I don't know... – Shahriar Oct 04 '22 at 18:17

score 1 · Answer 3 · edited Sep 02 '20 at 15:59

1

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

edited Sep 02 '20 at 15:59

TylerH

20,799
66
75
101

answered Jul 31 '09 at 16:48

SimplGy

20,079
15
107
144

score 0 · Answer 4 · edited Jan 06 '14 at 16:32

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-aspect of parent-to-child relations. There is a nice resource for CSS Styles. I don't think you need anything like JavaScript (jQuery) or something like that.

score 0 · Answer 5 · answered Jul 31 '09 at 22:57

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.

score 0 · Answer 6 · edited Sep 02 '20 at 12:00

0

Try the following:

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

Notice: you can also write the same height of your image in line-height property

edited Sep 02 '20 at 12:00

xKobalt

1,498
2
13
19

answered Sep 02 '20 at 10:04

sherif wageeh

1
2

Positioning image alt text

6 Answers6

Linked