30

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?

Improve this question

6 Answers 6

Reset to default
33 
img {
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

Sets the alt vertical and horizontal align to middle.

Improve this answer
6
  • 1
    ... even if the image does exist.
    – Álvaro González
    Commented Jul 31, 2009 at 11:58
  • line-height moved the alt text while image positioning was not changed. Thanks :)
    – KJ Saxena
    Commented Aug 1, 2009 at 5:20
  • 1
    if the alt text is multi-line then it would look bad or overflow
    – aleation
    Commented Sep 16, 2013 at 10:09
  • 11
    Interesting, it doesn't work but marked as an answer
    – X-HuMan
    Commented Aug 22, 2014 at 14:43
  • 3
    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
    Commented Nov 17, 2020 at 21:32
5 
img { 
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  }
Improve this answer
2
  • 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.
    – Community Bot
    Commented Jan 22, 2022 at 0:43
  • This works, but I'm wondering if setting img display to flex is a good idea or not. I don't know...
    – Shahriar
    Commented Oct 4, 2022 at 18:17
1

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

Improve this answer
0

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.

Improve this answer
0

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.

Improve this answer
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

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.