SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning DIV and SPAN text

    I am placing a <span> within a <div>. The div text is 12px, and the span text is 10px bold. I would like to middle-align the span text with the div text. I tried bottom-padding the span text, but that didn't work. Any suggestions for this newbie?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,101
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    A span is an "inline" element, meaning that it's designed to sit within a line of text etc. So things like padding don't work quite the same. One way to deal with this is to give the span display: block; which will make it behave like a block level element. Another option is to use a <p> instead and give it a special class.

    Feel free to post your code and some indication of how you want it to appear, and we can help further.

  3. #3
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    A span is an "inline" element, meaning that it's designed to sit within a line of text etc. So things like padding don't work quite the same. One way to deal with this is to give the span display: block; which will make it behave like a block level element. Another option is to use a <p> instead and give it a special class.

    Feel free to post your code and some indication of how you want it to appear, and we can help further.
    <div>text text text text text text.<span>060112</span></div> is the code. The <div> is 12 px, and the <span> is 10px. I'm attempting to vertical-align the smaller-text span with the larger-text div. It only needs to move up 1px.

    Thanks for the quick response, and I hope this is the info y'all need.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by barryL View Post
    I am placing a <span> within a <div>. The div text is 12px, and the span text is 10px bold. I would like to middle-align the span text with the div text. I tried bottom-padding the span text, but that didn't work. Any suggestions for this newbie?
    I'm assuming you want to middle-align it vertically? If so, put vertical-align:middle; on the <span>, and that should do the trick.

  5. #5
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Stevie! It worked!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •