WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Centering floats (13 posts)

  1. Jimmy
    Member
    Posted 7 years ago #

    This problem is driving me nuts. Look at this page in example:

    http://www.jayem.se/the-gallery/party-07/

    You will see that all the images are aligned to the left.

    I want these images to be aligned centered instead. But I don't know how to do it. Does anyone have a solution how to center these floating divs?

  2. Root
    Member
    Posted 7 years ago #

    Floats can't be centered.

  3. ejcross
    Member
    Posted 7 years ago #

    Have you tried playing around with text-align: center; and see if that works?

    I remember doing that along time ago, but don't remember how I accomplished it. I see in the code you are using lightbox, so you might try putting it on the img tag.

  4. Jimmy
    Member
    Posted 7 years ago #

    I have tried text-align: center; on everything. Seems to be some difficulties because of the floating divs the thumbnails are in.

    Root says floats cannot be centered. Is this really true? Must exist some kind of workaround to have my floating divs centered... Right?

  5. underdog74
    Member
    Posted 7 years ago #

    There's a problem with text-align:center and margins, can't remember what it was, sorry :)
    But maybe a google search might push you in the right direction.

  6. Jimmy
    Member
    Posted 7 years ago #

    I have googled it. But I'm not a css expert so I'm looking forward to someone who can help me... Please =)

  7. Root
    Member
    Posted 7 years ago #

    You need {margin: 0 auto}

  8. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    Root is correct. Floating divs cannot be centered. That's not what "float" does.

    If you want to center a div, set its left and right margins to auto and make it not floating.

  9. ejcross
    Member
    Posted 7 years ago #

    Yep, floats can't be centered, but using the margin: auto 0; should do the trick.

    Guess I should have looked at the code a little better with the CSS....

    good catch Root and Otto!

  10. Root
    Member
    Posted 7 years ago #

    It is hardly a *good catch* to be cognescenti of the fact that floats float. Left and Right. That is it. :) But thanks for the sentiment. :)

    Apropos the text-align center hack if you are concerned by IE 5+ compatility then it could be added as well in the parent container.

  11. Jimmy
    Member
    Posted 7 years ago #

    Ok. Thanks for all the support so far.

    I still can't get the images centered.

    Where do I put the margin: 0 auto; on what div?

    My css file for the Nexgen gallery is located here:

    http://www.jayem.se/wp-content/plugins/nextgen-gallery/css/jlog.css

    Please help, and again thx for the support so far!

  12. Jimmy
    Member
    Posted 6 years ago #

    Im not using nextgen gallery anymore...

  13. VeraBass
    Member
    Posted 6 years ago #

    from the Default theme css:

    /* Using 'class="alignright"' on an image will (who would've thought?!) align the image to the right. And using 'class="centered', will of course center the image. This is much better than using align="center", being much more futureproof (and valid) */
    
    img.centered {display: block;margin-left: auto;
    margin-right: auto;}

    (parent is p for post)

Topic Closed

This topic has been closed to new replies.

About this Topic