Home/ Questions/Q 1098163
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T00:32:19+00:00

I have the following code: <html> <head> <style type=text/css> #test img {vertical-align: middle;} div#test

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0