Menu
Inside a div with vertical-align: top; I have two elements, an img and a span (with aaa inside).
Both elements have display: inline-block; and width and height set.
No matter what I do and what I try, the elements are MISALIGNED as shown on picture below. What is wrong and how can I fix this?
This problem occurs in every browser - FF, IE, Safari ... http://jsfiddle.net/CaU59/
452
To align things in the inline direction, use the properties which begin with justify- . Use justify-content to distribute space between grid tracks, and justify-items or justify-self to align items inside their grid area in the inline direction.
Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
By default, inline elements do not force a new line to begin in the document flow. Block elements, on the other hand, typically cause a line break to occur (although, as usual, this can be changed using CSS).
Even though the property says “text” align, it affects all elements inside the block-level element that are either inline or inline-block elements. The property only affects the content inside the element to which it is applied, and not the element itself.
You need to add vertical-align to the elements themselves, not their container. They are currently aligned baseline as you can see from the text lining up with the image.
http://jsfiddle.net/CaU59/2/
154
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
