SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    span align mystery

    The gremlins struck again.
    I added a simple span to the style sheet for a few lines of text to center and display double size.

    #span-3 { font-size: 2em; text-align: center;}

    The text inside the span range happily changes size, but stays on the left. I checked 4 different sources that confirm this is how you do it, but Chrome, Firefox and Opera all keep it left aligned. I experimented with swapping "center for "right" and retyped it 3 times; the size changes with the value altered, but not the position.

    What have I done wrong this time?
    I don't have these problems with brain surgery.

  2. #2
    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 benbob View Post
    The gremlins struck again.
    I added a simple span to the style sheet for a few lines of text to center and display double size.

    #span-3 { font-size: 2em; text-align: center;}

    The text inside the span range happily changes size, but stays on the left. I checked 4 different sources that confirm this is how you do it, but Chrome, Firefox and Opera all keep it left aligned. I experimented with swapping "center for "right" and retyped it 3 times; the size changes with the value altered, but not the position.

    What have I done wrong this time?
    What you have to remember is that <span> is an inline element, so it shrink-wraps around its text or contents, and is always precisely the width needed for the text. What you've said is that you want the text to be centered within the <span>, but as the <span> is precisely the same width as the text, it will look exactly the same whatever alignment you choose, because there's no room for it to move.

    You have a couple options, depending on what fits best with the rest of the code/layout:
    • change the <span> to a <div>
    • make the <span> behave like a <div> with {display:block;}

    If you were wanting the text on the right, you could also apply float:right; to it, but there's no way to float anything to the middle.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    In order to apply text-align: the element must be able to have explicit width:. Only block-type elements have can have explicit width:.
    In addition to what Steve D said: you could also set the element to display:inline-block; and widthsome width then thetext will center withing that element's width.

    hope that helps


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
  •