Difficulty understanding this CSS Positioning result [duplicate] - css

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!