CSS vertical alignment of inline/inline-block elements
Give vertical-align:top;
in a
& span
. Like this:
a, span{
vertical-align:top;
}
Check this http://jsfiddle.net/TFPx8/10/
vertical-align
applies to the elements being aligned, not their parent element. To vertically align the div's children, do this instead:
div > * {
vertical-align:middle; // Align children to middle of line
}
See: http://jsfiddle.net/dfmx123/TFPx8/1186/
NOTE: vertical-align
is relative to the current text line, not the full height of the parent div
. If you wanted the parent div
to be taller and still have the elements vertically centered, set the div
's line-height
property instead of its height
. Follow jsfiddle link above for an example.