SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    vertical align in listed item

    I read forums telling that listed item isn't a block level element so vertical-align won't work. i got this page and logos are of different sizes and height and i want to make them middle so the page is equal on both side (top and bottom) like in td we had vertical align, i think . right now my page is showing really bad. how can i have that?
    Last edited by nofel; Aug 15, 2013 at 03:26. Reason: wrong url posted
    All those who wander aren't lost.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,172
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You posted the wrong link.

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You posted the wrong link.
    oops, sorry. now its correct one
    All those who wander aren't lost.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,172
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    I don't understand how you want them to look.

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i want them equal spaced, like equal empty space on top and bottom, if image is 100px in height,next to a image which has 200px height.
    All those who wander aren't lost.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    See if this gets you started. IE8+

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="content-language" content="en-us">
        <meta name="viewport" content="width=device-width">
        <title>middled logos</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1164222-vertical-align-in-listed-item
    Thread: vertical align in listed item
    2013.08.15 06:07
    nofel
    -->
        <style type="text/css">
    
    .listsoflogos {
        display:table;
        table-layout:fixed;
        margin:0 auto;
    }
    ul {
        list-style:none;
        display:table;
        table-layout:fixed;
        border-spacing:6px;
        padding:0;
    }
    li {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
    }
    
        </style>
    </head>
    <body>
    
    <div class="listsoflogos">
        <h3>Title of these logos</h3>
        <ul>
            <li><img src="http:placehold.it/100x80" alt="dummy logo"></li>
            <li><img src="http:placehold.it/120x50" alt="dummy logo"></li>
            <li><img src="http:placehold.it/160x60" alt="dummy logo"></li>
            <li><img src="http:placehold.it/180x40" alt="dummy logo"></li>
        </ul>
        <h3>Title of these logos</h3>
        <ul>
            <li><img src="http:placehold.it/120x50" alt="dummy logo"></li>
            <li><img src="http:placehold.it/160x60" alt="dummy logo"></li>
            <li><img src="http:placehold.it/180x40" alt="dummy logo"></li>
            <li><img src="http:placehold.it/100x80" alt="dummy logo"></li>
            <li><img src="http:placehold.it/60x60" alt="dummy logo"></li>
        </ul>
    </div>
    
    </body>
    </html>


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
  •