Quantcast
Channel: HTML Renderer
Viewing all articles
Browse latest Browse all 693

New Post: Image Alignment (Centering) not working

$
0
0
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"> 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"> 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>

Viewing all articles
Browse latest Browse all 693

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>