SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning an Image within a List

    I am trying to get it so that my image in the following example appears in the middle of the list rather than at the top but am not sure how to do this.

    CSS
    Code:
    .ulhistory { 
    list-style: none; 
    margin: 0px 0px 30px 0px; 
    padding: 0px; 
    overflow: hidden;
    width: 450px; 
    text-align: left;
    font: 12px "Arial", Helvetica, Sans-serif;
    line-height: 20px;
    } 
    
    .ulhistory li.left
    {
    float: left;
    width: 250px;
    margin: 0px; 
    padding: 0px;
    }
    
    .ulhistory li 
    {
    float: left;
    width: 200px;
    margin: auto; 
    padding:  0px;
    }
    
    img.history {margin: 0px; padding: 0px;}

    HTML


    Code:
    <ul class="ulhistory">
    <li class="left"><span class="historydate">1898 - 1910</span><br /> Text will appear in here </li>
    <li><img class="history" src="images/history/history1.jpg" alt=" " /></li>
    </ul>
    
    <ul class="ulhistory">
    <li class="left"><span class="historydate">1910 - 1930</span><br />Text will appear in here.</li>
    <li><img class="history" src="images/history/history2.jpg" alt=" " /></li>
    </ul>

    Cheers for any help

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure what you're asking, but to vertically centre the image within its list item, try
    Code:
    img.history {vertical-align:middle; margin: 0px; padding: 0px}
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No that hasn't worked I had tries that as well.

    What I am after is a list where on the left i have some text and on the right an image that goes with that text. The text on the left can be a few lines long or 5 lines long so I thought it would look better if the image was aligned in the middle of the list regardless of the text size. At the moment its aligned at the top

    Hopefully this is a bit more clear.

  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)
    Wouldn't it then be far better to use one list item instead of two, and put the image as a background image to that list item?

    As it is, you're using an entire list item for something purely presentational, which is semantically dubious.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry no thats not what i want.

    I want it so that on the left side it describes a photo and then on the right side it shows the photo and the photo is exactly in the middle of the text regardless of how long the text is.

    Aligning images in CSS seems to be a bit of a tricky subject in certain examples from my googleing

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I want it so that on the left side it describes a photo and then on the right side it shows the photo and the photo is exactly in the middle of the text regardless of how long the text is.
    If the image isn't going to be turned into a link (and isn't important content) then you could put the photo in the background of the list at the right center position and it will always be centered with the list text no matter how high the text is. (As you are describing the photo then I think its safe to say that it will be ok as a background image.)

    Of course you will have to use some padding-right to create space for the image and I am also assuming that images are roughly the same width.

    If the image is important content then it would be easier to align it to the top. The image could be in the same list item and just floated right.

    There are ways to vertically align block level elements but they are more complicated than they need to be. You may be better of using a 2 cell table which will do the job quite easily.


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
  •