Steve 25

I have an image in a div and I assigned it

 div display: table-cell
and
vertical-align: middle
and the image within it doesn't center.

<div>
    <img />
</div>

I then tried putting the image in a table and set the css to vertically align and the image centers:

<div>
    <table>
        <tr><td syle="..."><img /></td></tr>
    </table>
<div>

I don't understand why. I don't like using the table, as I wonder if the table tag makes the page more inefficient in terms of rendering. I wonder if the fact that the div is being used by an Ajax control has anything to do with it. The div is used by this:

scrollable

The containing div has an assigned height. Any clues?

1 answer

0
points
This was chosen as the best answer

Sadly, this never works quite as you'd expect.

There are a few different ways to tackle it, depending on your requirements. There's a good roundup of methods to tackle this on this Theme Forest blog

Answered over 9 years ago by Simon Holmes
  • Thanks, that worked. Your link specified using display:table, which I didn't use as I was only using table-cell. Steve over 9 years ago