![]() ![]() When the novice developer applies vertical-align to normal block elements (like a standard ) most browsers set the value to inherit to all inline children of that element. Technically, this CSS attribute doesn't go on any other kinds of elements. Vertical-align:text-bottom as an example. Vertical-align:middle and display:inline-block In this paragraph, I have a cute little display:inline-block In this paragraph, I have two images- and -as examples. Shown in your browser, the above (with appropriate wrappers) display as: In a modern, standards-compliant browser, the following three code snippets do the same thing: When used in table cells, vertical-align does what most people expect it to, which is mimic the (old, deprecated) valign attribute. … this is because the CSS specification really screwed this one up (in my opinion)- vertical-align is used to specify two completely different behaviors depending on where it is used.The reason vertical-align:middle isn't doing what is desired want is because the author doesn't understand what it's supposed to do, but …. ![]() Traditionally, horizontal sizing and layout is easy vertical sizing and layout was derived from that. By its very nature, it scales width-wise, and the content flows to an appropriate height based on the available width. HTML layout traditionally was not designed to specify vertical behavior.A FAQ on various IRC channels I help out on is How do I vertically center my stuff inside this area? This question is often followed by I'm using vertical-align:middle but it's not working! ![]()
0 Comments
Leave a Reply. |