Axel Posted February 9, 2013 Share Posted February 9, 2013 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! Link to comment Share on other sites More sharing options...
0 Tuishimi Posted February 9, 2013 Share Posted February 9, 2013 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* Link to comment Share on other sites More sharing options...
0 Axel Posted February 9, 2013 Author Share Posted February 9, 2013 That'll work! Many thanks :) Link to comment Share on other sites More sharing options...
0 primexx Posted February 10, 2013 Share Posted February 10, 2013 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. Link to comment Share on other sites More sharing options...
0 ashpowell Posted February 10, 2013 Share Posted February 10, 2013 Just add display block and float left to both f and connect (it'll also make the F box go the full height) Link to comment Share on other sites More sharing options...
Question
Axel
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/
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!
Link to comment
Share on other sites
4 answers to this question
Recommended Posts