• 0

[CSS] Move text up above baseline with span?


Question

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

4 answers to this question

Recommended Posts

  • 0

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*

  • 0

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.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • It's weird how some people don't know how to read the article... "If you remember the tests SpaceX was performing around 2012 with Grasshopper, well Honda is at about the same stage with its reusable rocket."
    • Microsoft Project 2021 Professional for Windows now just $9.97 by Steven Parker Today's highlighted deal comes from our Apps & Software section of the Neowin Deals store, where you can save $240 off Microsoft Project 2021 Professional for Windows. Be the boss of any project with Microsoft Project Professional 2021. This powerful yet easy-to-use app lets you stay on track, from small tasks to larger projects. Manage your projects more efficiently with the right timelines, budgets, and resources. You'll get automated scheduling tools as well as built-in reports to help you reduce inefficiencies and make better, informed decisions. Project management has never been this easy with Microsoft Project Pro. Lifetime license for Microsoft Project Professional 2021 One-time purchase installed on 1 Windows PC for use at home or work Instant Delivery & Download – access your software license keys and download links instantly Free customer service – only the best support! Why Microsoft Project Professional 2021? Pre-built templates help you get your project started on the right track Sync with Project Online and Project Server Submit timesheets to capture time spent on project and non-project work Run what-if scenarios to make the most of your task assignments Auto-populate start and end dates based on dependencies Visually represent complex schedules with built-in multiple timelines Supports Long-Term Servicing Channel (LTSC) and is compatible with Office LTSC and Office 2021 Good to know Length of access: lifetime Redemption deadline: redeem your code within 30 days of purchase Access options: desktop Max number of device(s): 1 Version: 2021 Pro Updates included Microsoft Project 2021 Professional for Windows normally costs $249.99, but it can be yours for just $14.97 for a limited time, that's a saving of $235. For terms, specifications, and license info please click the link below. Use MSO5 when checking out for additional $5 off. Coupon Expires June 29 Get Microsoft Project 2021 Professional for Windows for just $9.97, or learn more Although priced in U.S. dollars, this deal is available for digital purchase worldwide. We post these because we earn commission on each sale so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. Other ways to support Neowin Whitelist Neowin by not blocking our ads Create a free member account to see fewer ads Make a donation to support our day to day running costs Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: Neowin benefits from revenue of each sale made through our branded deals site powered by StackCommerce.
    • Weird how some people don't need to crash 7 rockets before they get it right.
    • Or it's a bug that can easily be fixed with an update. My guess is the limitation is there to prevent game makers from doing dumb things like having a racing game constantly rumble while the car is in motion. Sounds like the threshold or detection needs to be tweaked if it is triggering for no reason.
    • Nice I guess. Azure's DaaS feature has supported that for years. It's so odd to me how MS is deploying Azure and 365 DaaS as two totally different services with different features. I would think the 365 cloud desktops would just be a slightly dumbed down frontend that manages the same service.
  • Recent Achievements

    • Week One Done
      slackerzz earned a badge
      Week One Done
    • Week One Done
      vivetool earned a badge
      Week One Done
    • Reacting Well
      pnajbar earned a badge
      Reacting Well
    • Week One Done
      TBithoney earned a badge
      Week One Done
    • First Post
      xuxlix earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      676
    2. 2
      ATLien_0
      286
    3. 3
      Michael Scrip
      224
    4. 4
      +FloatingFatMan
      197
    5. 5
      Steven P.
      137
  • Tell a friend

    Love Neowin? Tell a friend!