Image Alignment (Centering) not working

Jul 1, 2013 at 5:50 PM
According to w3c this should center an image:

img.center { display: block; margin-left: auto; margin-right: auto; }

In HTML Renderer, it instead floats the image underneath the other DIVs.

Any pointers to where I should look to fix this?
Thanks!
-Dan
Jul 1, 2013 at 6:15 PM
Edited Jul 1, 2013 at 6:18 PM
Interesting. Here's some sample HTML/CSS. If I remove (or move the property to the IMG tag) the width: 120px; attribute it works as desired. Should that be happening? Also, need to view source of the image to get full HTML, sorry - CodePlex is mangling the output...

Code Example Non-Desired Effect:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head> <title></title> <style type="text/css">.product4T { background: none; border: none; font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; font-size: 12px; font-weight: 100; margin:0px; padding: 0px; text-align:center; width: auto; } .product4T .productImage { border: none; height: 100px; margin-top: 2px; padding: 0px; width: 120px; } .product4T .productImageImg { max-height: 100%; max-width: 100%; } </style> </head> <body style="Margin:0">
<div class="product4T"> <div class="productTitle">1 Slightly used logo</div> <div class="productImage"><img class="productImageImg" src="https://www.google.com/images/srpr/logo1w.png" alt="Product Image" /></div> </div> </body>
</html>

Code Example Desired Effect:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head> <title></title> <style type="text/css">.product4T { background: none; border: none; font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; font-size: 12px; font-weight: 100; margin:0px; padding: 0px; text-align:center; width: auto; } .product4T .productImage { border: none; height: 100px; margin-top: 2px; padding: 0px; } .product4T .productImageImg { max-height: 100%; max-width: 100%; width: 120px; } </style> </head> <body style="Margin:0">
<div class="product4T"> <div class="productTitle">1 Slightly used logo</div> <div class="productImage"><img class="productImageImg" src="https://www.google.com/images/srpr/logo1w.png" alt="Product Image" /></div> </div> </body>
</html>
Developer
Jul 4, 2013 at 9:05 AM
Regarding image center there is currently bug setting display: block on the image, also "margin-left: auto; margin-right: auto;" doesn't seems to work in IE and Chrome so I'm not sure how it should work.
The simplest way to achieve what you want is:
<div style="text-align:center;"> <img class="center" src="https://www.google.com/images/srpr/logo1w.png" alt="Product Image" /> </div> Regarding the "width: 120px;" issue, this is a bug, though this seems to work only in IE.. not sure why is that, need to check it.