SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering floated images?

    Can one center floated images? I used this alistapart article to display images on my website: http://alistapart.com/stories/practicalcss/

    Problem is they left align themselves in the container they are in. I tried text-align: center; <center></center>, etc. to get them centered in the container they are in, but no dice. Can this be done and am I simply missing how to do it?

    TIA

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

    Text-align:center on the parent will centre images and text horizontally.

    At a guess I'd say you were putting the text:align center on the image itself which won't work.

    Paul

  3. #3
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope. I have a <div class='image'> that goes around the image itself. i put around all the images a <div class='center'>. Class image has float: left; for it, and class center has text-align: center; for it. Doesn't work in IE6.0 or Mozilla.

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

    Can you post the exact code you are using or you can try to work it out from this example.

    This will centre an image horizontally (if you are using a similar format).

    Code:
    <style type="text/css">
    <!--
    .outer {
     float:left;
     height: 100px;
     width: 300px;
     background-color: #FFFF00;
     text-align:center
    }
    -->
    </style>
    </head>
    <body>
    <div class="outer"><img src="image.gif" width="100" height="100" alt="" /></div>
    </body>
    Paul

  5. #5
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Each image is wrapped in a css div:

    Code:
     #gallery .image { float: left; border: 1px solid #0179B1; }
    I then tried wrapped all the image divs in this which didn't work:

    Code:
     #gallery .center { text-align: center; }
    I tried this html code around all the image divs which didn't work:

    Code:
     <center> ... </center>
    From your example below, I modified the image div to such with no avail:

    Code:
     #gallery .image { float: left; border: 1px solid #0179B1; text-align: center; }

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

    You are trying to float the image left and center it at the same time. Both won't work.

    Surely it's the gallery that should be floated and the image centred in the gallery. Apply the styles to the gallery not the image.

    I would still need more code to give you the exact answer. For example how big is your gallery and are you trying to centre more than one image in it? Is the gallery being floated across the page (as I suspect) and the image is contained within?

    The code I gave you would achieve this if you place it in the right place. I think you just need to think it through a bit more (lol) .

    Paul

  7. #7
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha, you're right Paul. If only we had hindsight in advance. Turns out that I really didn't need the float:left; option. I just assumed I needed since the article at alistapart showed using that. I took it out and reworked a line or two and got what I want now.

    Thanx for the assistance Paul!


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
  •