Img with {Display: Table-Cell} -- Is It a Bug

img with {display: table-cell} -- is it a bug?

The problem seems to be mostly due to the border-collapse. If you remove that, the alignment problem goes away. I can't seem to find any other discussion of this problem online but I have noticed bugs in the border-collapse: collapse algorithm many times in Firefox and Safari (lines that disappear/reappear as you scroll, etc). This appears to be just another bug in that algorithm.

You're are right however, that it is specific to the image, if you wrap the images in divs, the problem goes away:

<html>
<head>
    <style>
        .photos {display: table; border-collapse: collapse;}
        .photos > div {display: table-row; border-collapse: collapse;}
        .photos > div > * {
            border-collapse: collapse;
            display: table-cell;
            vertical-align: top;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="photos">
        <div>
            <p>Hello World</p>
            <div><img src="http://www.studentsoftheworld.info/sites/music/img/23448_shopping_bags1.gif" /></div>
            <p>Hello World</p>
        </div>
        <div>
            <p>Hello World</p>
            <div><img src="http://www.studentsoftheworld.info/sites/music/img/23448_shopping_bags1.gif" /></div>
            <p>Hello World</p>
        </div>
    </div>
</body>
</html>

I've tested this in Firefox 3.1 in Ubuntu and XP, Firefox 3.5 in XP, Safari 4 in Wine and XP, and Chrome 3 in XP and they ALL exhibit errors in rendering the border-collapse. Only Firefox shows the image table-cell as one pixel low.

Opera 9.52 in XP oddly does not display the image at all.
Opera 10.10 in XP behaves like the rest.

Perhaps there's something about the spec that causes so many browsers to interpret this way.

Image no longer responsive as put in table cell layout

How about dropping that "CSS-table" stuff and doing it a bit easier?

<div style="width:auto;height:auto;margin:25%;text-align:center;vertical-align:middle">
     <img src="URL">
</div>

At least, that’s how I would handle it...

EDIT:

Please note that I've put the CSS inline to show you what element should get what style. In production, you should — as a comment to this answer correctly stated — always separate style from code like. So, practically, you'll end up with something like this:

<style>
.centerimg {
    width:auto;
    height:auto;
    margin:25%;
    text-align:center;
    vertical-align:middle
}
</style>

...

<div class="centerimg">
    <img src="#">
</div>

EDIT 2:

Replying to the related comment, here's the update to make the image fit it's parent proportionally:

If your image has a bigger width than height...

<style>
...
img{
   max-width:100%;
   height:auto
}
</style>

or, if your image has a smaller width than height...

<style>
...
img{
   max-height:100%;
   width:auto
}
</style>

EDIT 3:

Looking at your fiddle, I came up with this which works like you want it to work:

<style>
*{
width:100%;
height:100%;
margin:0;
text-align:center;
vertical-align:middle
}

img{
width:auto;
height:100%;
}
</style>

I've forked your fiddle to show the updates: http://jsfiddle.net/LPrkb/1/

EDIT 3:

As the OP doesn't seem to be able to decide what he needs, I'm adding this final edit due to his latest comment.

You could also use a CSS background-image with "background-size:contain" on the "mainContainer" and be done with it... check http://jsfiddle.net/HGpfJ/2/ or look at this 100% working example taking a completely different approach which results in just the same effect/functionality:

<!DOCTYPE HTML>
<html itemscope="itemscope" itemtype="http://schema.org/WebPage">
<head>
<title>Example</title>
<style>
html,body{width:100%;height:100%;margin:0;padding:0}
#centerimg{
width:100%;
height:100%;
background:transparent url(http://oi42.tinypic.com/v9g8i.jpg) no-repeat scroll center;
background-size:contain;
}
</style>
<body>
<div id="centerimg"></div>
</body>
</html>

Let's face the facts: depending on where in the document structure you want to have the image "centered", there are more than a dozen of ways to do it.

If OP needs specific code, we will need the complete document structure from OP and not simply a "generalized" code-snippet which could be anywhere in whatever document structure.

Display table and table-cell bug in Chrome

It is because you have given your .circle a width and height of 0, this means that there is actually no space inside the object and so when you give the width and height of the span as 100%, it's actual width and height will be 0

If you give your circle an actual width and height instead of making the shape using padding then it should work

http://jsfiddle.net/pj3u5/

Spacing issue with image placed in table - HTML and CSS

You only need to specify a width for the table cells. Try adding this to your CSS:

th, td {
    width: 33%;
}

CSS table-cell size issues

You need to always worry about vertical alignment with tables - even css styled ones it seems.

Just add a vertical-align property to the title class:

.title {
display: table-cell;
vertical-align: top;
background-color:blue;
width:100%;
height:185px;
}

Adding image inside table cell in HTML

This worked for me:-

 <!DOCTYPE html> 
  <html>
  <head>
<title>CAR APPLICATION</title>
 </head>
 <body>
<center>
    <h1>CAR APPLICATION</h1>
</center>

<table border="5" bordercolor="red" align="center">
    <tr>
        <th colspan="3">ABCD</th> 
    </tr>
    <tr>
        <th>Name</th>
        <th>Origin</th>
        <th>Photo</th>
    </tr>
    <tr>
        <td>Bugatti Veyron Super Sport</th>
        <td>Molsheim, Alsace, France</th>
                <!-- considering it is on the same folder that .html file -->
        <td><img src=".\A.jpeg" alt="Sample Image" border=3 height=100 width=300></img></th>
    </tr>
    <tr>
        <td>SSC Ultimate Aero TT  TopSpeed</th>
        <td>United States</th>
        <td border=3 height=100 width=100>Photo1</th>
    </tr>
    <tr>
        <td>Koenigsegg CCX</th>
        <td>Ängelholm, Sweden</th>
        <td border=4 height=100 width=300>Photo1</th>
    </tr>
    <tr>
        <td>Saleen S7</th>
        <td>Irvine, California, United States</th>
        <td border=3 height=100 width=100>Photo1</th>
    </tr>
    <tr>
        <td> McLaren F1</th>
        <td>Surrey, England</th>
        <td border=3 height=100 width=100>Photo1</th>
    </tr>
    <tr>
        <td>Ferrari Enzo</th>
        <td>Maranello, Italy</th>
        <td border=3 height=100 width=100>Photo1</th>
    </tr>
    <tr>
        <td> Pagani Zonda F Clubsport</th>
        <td>Modena, Italy</th>
        <td border=3 height=100 width=100>Photo1</th>
    </tr>
</table>
  </body>
  <html>

Img with {Display: Table-Cell} -- Is It a Bug