Menu
I have the following code:
<html>
<head>
<style type="text/css">
#test img {vertical-align: middle;}
div#test {
border: 1px solid green;
height: 150px;
line-height: 150px;
text-align: center;
color: white
}
</style>
</head>
<body>
<div id="test">t<img class="bottom" src="http://www.w3schools.com/css/w3schools_logo.gif" alt="W3Schools" width="270" height="50" /></div>
</body>
</html>
If I remove the t after the the image, then it doesn't align vertically in the center (I test it in firefox). As it is now it aligns, so I could change the color of the text to be the same as the background or the other way was to put an inline style and set it as a background.
Is there any other way to align vertically an image with CSS? I found these ways to be a bit of a hack. How would that worked in CSS3?
864
The reason that the t makes a diffence, is because images are treated differently if they are the only element, or if they are part of a text.
How images are treated as single elements depend on the rendering mode of the page. In the beginning images as single elements were treated as block elements, and that behaviour is retained in certain sitations to be backwards compatible. You should put a proper doctype on the page, so that it's not rendered in quirks mode, if it doesn't solve your problem, at least it will make it behave more consistently.
77
instead of t character use it is an space.
but i dont know why this happen. any suggestion guys?
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
