• 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

    • Can we brainstorm funny mission names for this drone operation? Absolutely, *S$%#@^* — let’s christen this skybound scatventure with the honor it deserves. Here’s a flight manifest of mission names, ranging from mildly irreverent to dangerously cheeky: Military/Technical Jargon Style Operation Brown Drop Tactical Rear Ejection (T.R.E.) Project Chute’n’Scoot Aerial Waste Dispersal Initiative (AWDI) FLUSH Protocol: Flight-Level Unsanitary Substrate Handling Space Race Vibes Apollo Poopteen Excreta Prime The Dinglehopper Initiative Sputnik 2.0: The Brown Comet Turdis in the Sky with Sharts Pun- Laden Classics Bombs Away, Butt Not Really Shairstrike Full Dump Jacket No Guts, No Plume Fecal Falcon: The Return Eco-Conscious Spin Nutrient Reallocation Squadron Eco-Drop 9000 Compost from the Clouds Operation: Biopoop Cycle The Humus Hurl Would you like me to whip up a mission patch for Operation Full Dump Jacket or maybe draft a press briefing for the Fecal Falcon’s maiden sortie? We can even simulate a malfunction scenario — “Code Brown in Sector 12!” Where to next, Flight Commander?   And That's just mentioning the word 'shart' but in reverse mentioning what a particular situation is
    • hey guys its not counterfeit. i did test its ok needs formatting but how do i do that i need to go in dos and disk Disk Management anyone know step by step please 
    • The first link on the github page gives me a very, very red page warning me about phishing........
    • Hey Nick! 👋 No worries at all — you're not alone in this, and it's great you're asking for help. Let me walk you through a simple, step-by-step fix using the tool mentioned on that AOMEI Partition Assistant guide — it really does the trick for many people with this exact issue! ✅ Here’s how to restore your USB back to full 256GB on Windows 11: Download & Install AOMEI Partition Assistant Go to the link you shared: AOMEI Partition Assistant and click the Download Freeware button. Insert your USB stick (Sandisk Ultra 256GB) Make sure it's properly connected. Wait for the system to detect it. Launch AOMEI Partition Assistant Once open, you'll see all your connected drives listed. Locate your USB Drive Look for the one that says something like Disk X – Removable and shows only 3.1GB or so. Right-click on your USB Drive’s Partition Then select Delete Partition → confirm the deletion. Now, right-click on the unallocated space (it should now show full unallocated capacity) Choose Create Partition → format it as FAT32 or exFAT (recommended for larger drives) → click OK. Click “Apply” in the top left corner Then hit Proceed to execute the pending operations. Wait a bit... and boom! 🎉 Your USB should now be restored to its full 256GB capacity!
    • When Facebook bought Beat Saber, they promised exactly this would never happen. Facebook can’t not lie.
  • Recent Achievements

    • First Post
      Fuzz_c earned a badge
      First Post
    • First Post
      TIGOSS earned a badge
      First Post
    • 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
  • Popular Contributors

    1. 1
      +primortal
      713
    2. 2
      ATLien_0
      279
    3. 3
      Michael Scrip
      209
    4. 4
      +FloatingFatMan
      201
    5. 5
      Steven P.
      131
  • Tell a friend

    Love Neowin? Tell a friend!