Search code examples
htmlcsscss-sprites

<span> and <a> tags not aligning vertically

I am trying to create links for following on Facebook, twitter etc. using a sprite image. There is a plain text following links made up of these sprite images set as background. I am having problem aligning the text, the span and the 'a' links vertically.

Here is the css

.sprite a {
    border:solid 1px blue;
    width:20px;
    height:20px;
    display:inline-block;
    color:#00f;
    background:url('images/sprite.png') 0 0;
}

span {
    border: solid 1px red;
}

Here is the HTML

<div class="sprite">
    Follow us on: <span id="spriteFacebook"><a href="http://facebook.com"></a></span>
</div>

I am using borders just to identify the misalignment

This is how the result looks like

preview image of the problem

Shouldn't these be aligned by default? Should I use floating divs to achieve this?

Solution

  • Try that:
    - wrap a span around your text: <span class="text">Follow us on:</span>
    - float it left and give it a line height: span.text { float: left; line-height: 33px; }

    http://jsfiddle.net/6s4HM/20/