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:

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>​

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

Answer 1

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.

Answer 2

Give vertical-align:top; in a & span . Like this:

a, span{
 vertical-align:top;
}

Check this http://jsfiddle.net/TFPx8/10/

Answer 3

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;
}

Answer 4

For fine tuning the position of an inline-block item, use top and left:

  position: relative;
  top: 5px;
  left: 5px;

Thanks CSS-Tricks !