Question

I am having an issue with a particular aspect of a web dev that I am doing at the moment with regards the css styling.

What I have is the following HTML:

<div id = "spaninsidea">
 <ul id="spantest">
    <li><a id="nav-button-one"  href="javascript:return false;"><span>Link 1</span></a></li>
    <li><a id="nav-button-two"  href="javascript:return false;"><span>Link 2</span></a></li>
</div>

Styled with the following CSS:

#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; }
#spaninsidea li { display: inline;}
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px; 
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green;
float: left; }
#spaninsidea li a span {background-color:orange; margin-top:50px}

What I am trying to get is the spaned text inside the link to sit in the middle of the a tag. When I try to apply the margin setting on the span it simply sits still, however if I change the font color etc it plays cricket. I cant figure why it styles but wont budge.

I will confess the front end stuff is new to me so if there are any glaring issues that you can see in general please do point them out.

Cheers

Answer 1

Usually you shouldn’t have a span within an a. That would be the first part… I would suggest try to apply a text-align:center; to the span as well.

Update: See a working version here: http://jsfiddle.net/2eLer/ You just have to set the line-height of the span equal to or greater than the height of the a.