SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    vertical-align a span?

    just trying to get the text to be in the middle (vertical) of the span???

    Code:
    .UserButtonDiv 
    {
     position: absolute;
     left: 13px;
     top: 13px;
     width:96px;
     height:55px;
     overflow:hidden;
     padding:5px;
     background: cadetblue;
     text-align: center;
     vertical-align: middle;
     color: #ffffff;
     font-size:12px;
     font-family: Arial;
     word-wrap: break-word; /* this style allows long words to be wrapped forcibly if they overflow the assigned width of their containers */
    }
    Code:
     
       <div class="UserButtonDiv">
    	<span ID="lblDescription" Runat="server" />
       </div>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There is no easy way to fluidly align an element vertically within another block element.

    If yoou just have one word or a few words that aren't going to wrap then you can set line-height to the same size as the height and then the text will be centred automatically.

    Code:
    .UserButtonDiv 
    {
     position: absolute;
     left: 13px;
     top: 13px;
     width:96px;
     height:55px;
     line-height:55px;
     overflow:hidden;
     padding:5px;
     background: blue;
     text-align: center;
     color: #ffffff;
     font-size:12px;
     font-family: Arial;
     word-wrap: break-word; /* this style allows long words to be wrapped forcibly if they overflow the assigned width of their containers */
    }
    Otherwsie you will just have to use position it with some other approximate method.

    Paul

  3. #3
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    doh, text will very on length, so needs to be dynamic, therefor I don't think line-height:55px; will work. Maybe I will drop it into a table and valign the TD...man that's so old school


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
  •