Jump to content



Photo

[CSS] Move text up above baseline with span?


  • Please log in to reply
4 replies to this topic

#1 Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 09 February 2013 - 13:15

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!

Attached Images

  • Untitled-3.jpg



#2 Tuishimi

Tuishimi

    Michinator

  • Joined: 19-November 10
  • OS: Windows 8

Posted 09 February 2013 - 13:57

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*

#3 OP Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 09 February 2013 - 14:26

That'll work! Many thanks :)

#4 primexx

primexx

    Neowinian Senior

  • Tech Issues Solved: 6
  • Joined: 24-April 05

Posted 10 February 2013 - 00:17

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.

#5 ashpowell

ashpowell

    Neowinian

  • Joined: 13-November 06
  • Location: UK
  • OS: Windows 8.1
  • Phone: Nexus 5

Posted 10 February 2013 - 00:24

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

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