• 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

    • Microsoft 365 will soon disable outdated authentication protocols for file access by Usama Jawad On a fairly regular basis, Microsoft disables outdated protocols that are used to access its services. In the past few years, the company has deprecated Basic Auth in Exchange Online and cut access to Outlook for third-party apps relying on this protocol. Now, it has decided to get rid of old authentication protocols for file access across Microsoft 365 services. As reported by Bleeping Computer, Microsoft has posted a message on its Microsoft 365 Admin Center. Starting from mid-July 2025, the company will begin disabling legacy authentication protocols used to access files across Microsoft 365 and Office apps, SharePoint, and OneDrive. Essentially, applications or services which use the Relying Party Suite (RPS) or FrontPage Remote Procedure Call (FPRPC) will to perform browser-based authentication to perform open operations on Office files will no longer be able to do so. As expected, this is primarily being done to improve the cybersecurity posture of various services. Microsoft states that RPS can be brute-forced and phished with relative ease as it is fairly outdated. Similarly, FPRPC is typically used for remote web page authoring and it is susceptible to exploitation through various vulnerabilities too. As such, both of these protocols will be disabled by default starting from mid-July 2025, with the rollout of this change targeting completion by August 2025. The Redmond tech giant will update the protocol baseline by default without mandating any licensing changes for customers. In addition, once these modifications are rolled out, Microsoft 365 will require admin consent to get third-party access to files and sites. IT admins can view the guidance available here to configure admin consent workflows. Microsoft says that these changes align with the principles of its Secure Future Initiative (SFI). Earlier today, it announced the rollout of improved security defaults for Windows 365 citing the same reasons too.
    • It does and it can... I took an i3 board and upgraded it to my FX8350... no issues, just put in new drivers over the top that Windows didn't. Not the issue for me, (though I eventually did do a new install from 23H2 to 24H2)... I was on 22H2 at the time. The issue is activation. You may get hit with having to activate again.
  • Recent Achievements

    • 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
    • Week One Done
      TBithoney earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      709
    2. 2
      ATLien_0
      284
    3. 3
      Michael Scrip
      220
    4. 4
      +FloatingFatMan
      199
    5. 5
      Steven P.
      131
  • Tell a friend

    Love Neowin? Tell a friend!