CSS vertical alignment of inline inline-block elements

Question

I m trying to get several inline and inline-block components aligned vertically in a div  How come the span in this example insists on being pushed down  I ve tried both vertical-align middle  and vertical-align top   but nothing changes   HTML      lt div gt     lt a gt  lt  a gt  lt a gt  lt  a gt     lt span gt Some text lt  span gt   lt  div gt     CSS     a       background-color  FFF      width 20px      height 20px      display inline-block      border solid black 1px     div       background yellow      vertical-align middle    span       background red        RESULT    FIDDLE

User · Answer

Give vertical-align top  in a  amp  span  Like this   a  span   vertical-align top      Check this http   jsfiddle net TFPx8 10

User · Answer

For fine tuning the position of an inline-block item  use top and left     position  relative    top  5px    left  5px    Thanks CSS-Tricks

User · Answer

Simply floating both elements left achieves the same result    div   background yellow  vertical-align middle  margin 10px     a   background-color  FFF  width 20px  height 20px  display inline-block  border solid black 1px  float left     span   background red  display inline-block  float left

User · Answer

vertical-align applies to the elements being aligned  not their parent element  To vertically align the div s children  do this instead   div  gt          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

[html] CSS vertical alignment of inline/inline-block elements

Examples related to html

Examples related to css

Examples related to vertical-alignment