SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical align <span> inside <td>

    Hi guys,

    I'm trying to align "middle" <span> tags within <td> vertically. first <span> has following css:

    span.key
    {
    width:24px;
    height:10px;
    float:left;
    }

    second one has:

    span.fund
    {
    margin-left:28px;
    display:block;
    background-color:Black;
    }

    first <span> is empty and 2nd one contains text. The text seems to be by default align "middle" but first <span> does valign itself to middle inside <td>.

    I have also explicitily set

    <td style="vertical-align:middle">
    <span class="key"></span>
    <span class="fund>some text</span>
    </td>

    but still the result comes out as the one attached image.

    Please advice if i'm missing anything in the css to get both <span> tags display in the middle of <td>
    Attached Images Attached Images

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

    The vertical align applies to the td (cell) and not the content within the cell itself. It will vertically align the cell with other cells. The content will also be in the middle of the cell but not vertically aligned with respect to other content in that same cell. i.e(the content as whole will be vertically aligned within that cell.)

    To vertically align individual elements you would need to put them in separate cells.
    Code:
    td {vertical-align:middle}
    Code:
    <table>
        <tr>
       <td ><span class="key"></span> </td> 
       <td><span class="fund">some text</span> </td>
        </tr>
    </table>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Paul this works fine now.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The vertical-align property only applies to inline boxes (and table cells). One of your span classes is using float:left and the other display:block, which means neither box is inline anymore. Thus vertical-align won't apply to them, since they will not be rendered inside a line box.
    Birnam wood is come to Dunsinane


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
  •