ansaurus

Question

Image vertical align with css - strange

Answer 1

+1 A:

instead of t character use   it is an space.

but i dont know why this happen. any suggestion guys?

rahim asgari 2010-09-26 19:46:53

Answer 2

+1 A:

I think your problem is applying the vertical-align property on a wrong element - it should be applied to the surrounding element of the img, that is div#test in your case:

div#test {
border: 1px solid green;
height: 150px;
line-height: 150px;
text-align: center;
color: white
vertical-align: middle;
}

I don't know why it works with the t symbol added, perhaps a browser quirk?

dark_charlie 2010-09-26 19:46:56

Furthermore this doesnt apply to aligning an image within the div. it applies to aligning it within the actual line its on within the given `line-height`... the same as its going to align the actual text of the div and other applicable inline elements. If this is the only thing in the div, then there is only a single line so you may get the result youre looking for... but if you set the height of the div to something taller than a single line you will to get the result you want.

prodigitalson 2010-09-26 19:52:16

I tried every possible combination with vertical-align but it doesn't work when I remove the t. I am wondering how is the right way to do it in CSS3 this one.

JohnDel 2010-09-26 19:59:23

Answer 3

+6 A:

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.

Guffa 2010-09-26 19:53:18

Indeed with html transitional it doesn't work, but with doctype strict is working without the letter t. Thank you, even though this means that I can't use doctype transitional to align vertical an image with css...

JohnDel 2010-09-26 20:07:37

ansaurus

tags:

views:

answers:

Image vertical align with css - strange

related questions