1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

[ASK] how to align center image inside list?

Discussion in 'CSS' started by amahara, Aug 25, 2009.

  1. #1
    I have this list layout

    and now want to make the image align to the center like this

    how to do this in css?

    sorry for the bad english, its not my main language

    edit: please consider the (.)dot as blank space, i dont know how to make a space >.<

    edit: the source code is at the 6th post
     
    Last edited: Aug 25, 2009
    amahara, Aug 25, 2009 IP
  2. kookaboorra

    kookaboorra Peon

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Have you tried
    ol img {text-align: center;}
    Code (markup):
    ?
     
    kookaboorra, Aug 25, 2009 IP
  3. amahara

    amahara Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    i already try that, however it doesnt centered like i wanted it to be
    (it centered according to the list)
     
    amahara, Aug 25, 2009 IP
  4. Rasczak

    Rasczak Peon

    Messages:
    131
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    if you want to center something in other element, the parent element should have two attributes: display:block and some defined width... unless this condition is true, centering with "text-align" (or "margin:0 auto") won't work...

    try defining the LI element as a block, with some width (...of the column you placed it in) and then you'll see...
     
    Rasczak, Aug 25, 2009 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    li img {
      display: block;
      margin: 0 auto;
      }
    Code (markup):
    You can't use {text-align: center;}, because your list items also contain text which is left aligned.

    cheers,

    gary
     
    kk5st, Aug 25, 2009 IP
  6. amahara

    amahara Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    i already done that, but its still not perfectly aligned...

    "image 1" is more to the right than "image 2"

    here is the source code :

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
       <title>the image is not aligned :(</title>
    <style type="text/css">
       #bordered_div {
          width : 600px;
          border : 1px solid black;
       }
       #bordered_div img {
          display : block;
          margin : 0 auto;
          width : 200px;
       }
    </style>
    
    </head>
    
    <body>
       <div id="bordered_div">
          <ol>
             <li>
                some text 1
                <ul>
                   <li>
                      some text a
                      <img src="#" alt="image_1">
                   </li>
                   <li>some text b</li>
                </ul>
             </li>
             <li>
                some text 2
                <img src="#" alt="image_2">
             </li>
             <li>some text 3</li>
          </ol>
       </div>
    </body>
    </html>
    
    Code (markup):
     
    Last edited: Aug 25, 2009
    amahara, Aug 25, 2009 IP
  7. Rasczak

    Rasczak Peon

    Messages:
    131
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #7
    add this to CSS:

    #bordered_div ol li { display:block; width:600px; }

    of course change the width according your needs...
     
    Rasczak, Aug 25, 2009 IP
  8. amahara

    amahara Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    uh, i added it and it doesnt do anything :confused:
     
    amahara, Aug 25, 2009 IP
  9. sudharsan

    sudharsan Active Member

    Messages:
    164
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #9
    This should work :)

    img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
     
    sudharsan, Aug 25, 2009 IP
  10. amahara

    amahara Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    what make it different from my source code?

    
       #bordered_div img {
          display : block;
          margin : 0 auto;
          width : 200px;
       }
    
    Code (markup):
    btw i have tried it, and it dont do anything :confused:
     
    amahara, Aug 25, 2009 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Aw. This sucks. Lemme show you what's happening, tho in the future what you want to do is give each element a different ugly background colour, because then you can see what's happening easier (I use this all the time!)

    Yeah the last two posts were telling you different versions of what you already have. That's why they don't make a difference.

    Both your images ARE centered, but they are centered in their own containers. They are NOT in the same container: the image1 is inside a nested ul, while image2 is inside the main ol. So look:

    http://stommepoes.nl/centeredimg.png

    See I outlined each box. The nested ul is indented a bit, meaning the centered image is also indented a bit.

    So you could remove the margins or padding (remove both since one browser may use padding while another uses margins) on the lists. This means the circle-marked list items will line up fully to the left, but also means the images should line up perfectly.

    If you still need the text to be indented a bit I think you can put text-indent on the text of the li's:
    ol ul li {
    text-indent: whateverpx;
    }

    I think this shouldn't be able to touch your images since you've made them blocks.

    But anyway, do you see now why the images weren't lining up? You can also do this to see the reason:
    ol {
    background-color: #f00;
    }
    ol ul {
    background-color: #ff0;
    }

    ol img {
    background-color: #fff;
    }
    ol ul img {
    background-color: #00f;
    }

    now you can see that both are centered but their containers aren't the same width.
     
    Stomme poes, Aug 26, 2009 IP
  12. amahara

    amahara Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    i know that the image is aligned center with different width,
    but i don't know how make them aligned the same

    btw i edited my code as you suggested but it still gave me non aligned image :(

    i am starting to think that making this layout is impossible :(

    here is the source code now :

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
       <title>the image is not aligned :(</title>
    <style type="text/css">
       #bordered_div {
          width : 600px;
          border : 1px solid black;
       }
       #bordered_div img {
          display : block;
          margin : 0 auto;
          width : 200px;
       }
       ol ul {   /*added css*/
          margin: 0;
          padding: 0;
       }
       ol ul li {   /*added css*/
          text-indent: 35px;
       }
    </style>
    
    </head>
    
    <body>
       <div id="bordered_div">
          <ol>
             <li>
                some text 1
                <ul>
                   <li>
                      some text a
                      <img src="#" alt="image_1">
                   </li>
                   <li>some text b</li>
                </ul>
             </li>
             <li>
                some text 2
                <img src="#" alt="image_2">
             </li>
             <li>some text 3</li>
          </ol>
       </div>
    </body>
    </html>
    
    Code (markup):
     
    amahara, Aug 26, 2009 IP
  13. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #13
    Changes:
    <ol>
      <li>some text 1
        <ul>
          <li><span>some text a</span>
            <img src="#" alt="image_1"></li>
    
          <li><span>some text b</span></li>
        </ul>
      </li>
    
      <li>some text 2
        <img src="#" alt="image_2"></li>
    
      <li>some text 3</li>
    </ol>
    ==================
    ol ul li {}
    
    ul li span {
      padding-left: 35px;
      }
    Code (markup):
    cheers,

    gary
     
    kk5st, Aug 26, 2009 IP
  14. FilmFiddler

    FilmFiddler Greenhorn

    Messages:
    54
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    23
    #14
    Make sure you at least complete that doctype for the sake of Internet Exlorer. When shortened like that, as in posts #6 and #12, it causes IE, including version 8, to completely ignore 'margin: auto', hence nothing will centre in IE.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    [color=blue]"http://www.w3.org/TR/html4/loose.dtd"[/color]>
    Code (markup):
     
    FilmFiddler, Aug 26, 2009 IP
  15. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Hm yeah I like Gary's span better than text-indent on the li text but I didn't want to change the HTML.

    Also
    
       ol ul {   /*added css*/
          margin: 0;
          padding: 0;
       }
    
    Code (markup):
    only applies to uls' inside an ol. I would have removed it from both of them:
    ol, ul {
    margin: 0;
    padding: 0;
    }

    that's all ol's and all ul's regardless of who their daddy is.

    Gary's left-padding on the spans push the visible text back in place, where it was before removing margins and padding so it looks the same.
     
    Stomme poes, Aug 26, 2009 IP
  16. amahara

    amahara Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    yay finally with this code i was able to achieve the aligned image :)

    however it create another problem... the bullet doesn't appear now :(
    and for some reason i am forbidden to use "list-style-position : inside"

    so how to make the bullet appear inside div?
    and is there any way we can alter how the lists bullet to also appear indented right?


    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
       <title>the image is not aligned :(</title>
    <style type="text/css">
       #bordered_div {
          width : 600px;
          border : 1px solid black;
       }
       #bordered_div img {
          display : block;
          margin : 0 auto;
          width : 200px;
       }
       ol, ul {
          margin: 0;
          padding: 0;
       }
       ol ul li {}
       ul li span {
          padding-left: 35px;
       }
    </style>
    
    </head>
    
    <body>
       <div id="bordered_div">
          <ol>
             <li>
                some text 1
                <ul>
                   <li>
                      <span>some text a</span>
                      <img src="#" alt="image_1">
                   </li>
                   <li><span>some text b</span></li>
                </ul>
             </li>
             <li>
                some text 2
                <img src="#" alt="image_2">
             </li>
             <li>some text 3</li>
          </ol>
       </div>
    </body>
    </html>
    
    Code (markup):
     
    amahara, Aug 26, 2009 IP
  17. amahara

    amahara Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    SOLVED

    thx for all those that help me achieve this effect :D

    i am using position relative to affect the image
    for those that want to know, here is the code :)

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
       <title>the image is now aligned :)</title>
    <style type="text/css">
       #bordered_div {
          width : 600px;
          border : 1px solid black;
    	  
       }
       #bordered_div img {
          display : block;
          margin : 0 auto;
          width : 200px;
       }
       span{
          position:relative;
          left:-20px;
       }
    </style>
    
    </head>
    
    <body>
       <div id="bordered_div">
          <ol>
             <li>
                some text 1
                <ul>
                   <li>
    		   some text a
                      <span><img src="#" alt="image_1"></span>
    		</li>
                   <li>some text b</li>
                </ul>
             </li>
             <li>
                some text 2
                <img src="#" alt="image_2">
             </li>
             <li>some text 3</li>
          </ol>
       </div>
    </body>
    </html>
    
    Code (markup):
    i know that this code is still far from good lol, but at least its working :p

    its working in FF, IE6 and IE7, just that somehow it doesn't work in Chrome
    idk why but maybe Chrome doesn't support position relative~
     
    amahara, Aug 26, 2009 IP