Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help align spans inside a div

    Hi,

    I have the following html and inline css:

    <div id="container" style="height: 34px; width: 100%; border:1px solid #333">
    <span id="largeText" style="font-size: 22px">Large text</span>
    <span id="smallText" style="font-size: 12px">Small text</span>
    </div>

    I want to
    (1) Vertically align both largeText and smallText to the center of the div
    (2) Horizontally largeText will be attached to the left with 5px margin on left and smallText will be attached to the right with 5px margin on right.

    Please help

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    (1) Vertically align both largeText and smallText to the center of the div
    Code:
    #container span{
    display:block;
    text-align:center;
    }
    (2) Horizontally largeText will be attached to the left with 5px margin on left and smallText will be attached to the right with 5px margin on right.
    Code:
    span#largeText{
    text-align:left;
    margin-left:5px;
    }
    span#smallText{
    text-align:right;
    margin-right:5px;
    }
    (The above CSS doesn't actually move the entire element)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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