Sign in to follow this  
Followers 0
Axel

[CSS] Move text up above baseline with span?

5 posts in this topic

So I'm trying to implement a pure css facebook button and the text alignment on the second part is annoying me:

http://jsfiddle.net/nNyUC/1/


#login.facebook {
background-color: #1767c3;
border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
color: white;
cursor: pointer;
display: block;
margin:0 0 20px 0;
height: 42px;
line-height: 42px;
padding: 0px;
width: 270px;
overflow: hidden;
}

#login.facebook span.f{
background-color: #1560b6;
font-family:'ars_maquette_probold', Arial, Helvetica, sans-serif;
font-size: 32px;
height: 100%;
padding: 0px 15px 0 15px;
margin: 0px;
}

#login.facebook span.connect{
font-family:'ars_maquette_proregular', Arial, Helvetica, sans-serif;
font-size: 15px;
height: 42px;
padding: 0px 0px 0 10px;
margin: 0px;

<div id="login" class="facebook" onclick="login()"><span class="f">f</span><span class="connect">CONNECT WITH FACEBOOK</span></div>

The text displays on the same baseline as the first f and I want it to actually display in the middle of the button vertically.

I bet this is really simple!

Cheers guys!

post-33944-0-87419500-1360415662.jpg

Share this post


Link to post
Share on other sites

I added this...

position: relative;

top: -10%;

To the span and it seemed to work... trial and error with spans and alignment. Pain in the butt for sure.

(Works in IE 10 - might not in FF or Chrome)

ps - I always check stackoverflow when I cannot figure something out. That site and of course w3schools are two of my favorites. And I am one of those people who NEED documentation because once I learn something, if I don't use it again for awhile it's gone... unless it is unimportant trivia... that I seem to be able to remember *sigh*

Share this post


Link to post
Share on other sites

That'll work! Many thanks :)

Share this post


Link to post
Share on other sites

that's hacky. the problem is that something is messing up the relationships between the boxes. in this case, your spans are both inline so the bigger font size is pushing the baseline down for the whole thing. usually vertical-align:middle on the parent would do the trick perfectly.

The solution would be to break the connection between the two boxes. easiest way would be to just float the left one http://jsfiddle.net/nNyUC/39/

I don't remember the specs off the top of my head but i believe you're only supposed to float block elements, which is why i declared it to be a block. it works without the declaration but it may be the quirks mode kicking in. you should double check this point.

Share this post


Link to post
Share on other sites

Just add display block and float left to both f and connect

(it'll also make the F box go the full height)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.