• 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

    • Arc 1.57.0 by Razvan Serea ARC browser is finally here for Windows, bringing its unique and modern approach to browsing. With a clean interface and a powerful sidebar, ARC makes managing tabs and organizing your workflow a breeze. You can group tabs, pin important pages, and quickly switch between work and personal spaces without clutter. It’s designed to be fast, customizable, and genuinely useful, making it more than just a browser—it’s a productivity tool. If you’re on Windows and want a fresh way to browse and stay organized, ARC is worth checking out. ARC browser key features: Split View: Work with multiple tabs side by side in a single window for efficient multitasking. Tab Grouping: Organize tabs into customizable groups for better workflow management. Pinned Tabs: Keep essential pages permanently accessible in the sidebar. Spaces: Create separate workspaces for different projects or personal use, reducing clutter. Sidebar Integration: Access bookmarks, notes, and tools directly from the sidebar for quick navigation. Customizable Themes: Personalize the browser’s appearance with themes and color schemes. Quick Search: Find tabs, history, or bookmarks instantly with a powerful search bar. Lightning-Fast Performance: Built for speed with optimized resource usage and minimal lag. Built-in Note-Taking: Jot down ideas or save snippets directly within the browser. Focus Mode: Hide distractions and focus on a single tab or task. Cross-Device Syncing: Seamlessly sync your data across multiple devices for a unified experience. Keyboard Shortcuts: Boost productivity with customizable shortcuts for common actions. AI-Powered Suggestions: Get smart recommendations for tabs, bookmarks, and workflows. Privacy Controls: Built-in tools for blocking trackers and managing cookies for enhanced security. Extensions Support: Compatible with popular browser extensions to extend functionality. Arc Browser 1.57.0 release notes: ''Thanks as always for using Arc. This week's release includes a bump to Chromium 137.0.7151.69, which patched three security vulnerabilities. Enjoy!'' Download: Arc Browser 1.57.0 | 1.9 MB (Freeware) View: Arc Browser Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • they put useless AI, new plastick sticker 8K and price +$80 for nothing
    • this AD block popup in annoying
  • Recent Achievements

    • First Post
      Uranus_enjoyer earned a badge
      First Post
    • Week One Done
      Uranus_enjoyer earned a badge
      Week One Done
    • Week One Done
      jfam earned a badge
      Week One Done
    • First Post
      survivor303 earned a badge
      First Post
    • Week One Done
      CHUNWEI earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      427
    2. 2
      +FloatingFatMan
      237
    3. 3
      ATLien_0
      213
    4. 4
      snowy owl
      207
    5. 5
      Xenon
      159
  • Tell a friend

    Love Neowin? Tell a friend!