WordPress.org

Support

Support » Themes and Templates » [Resolved] Centering floats

[Resolved] Centering floats

  • Jimmy
    Member

    @jayem82

    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?

Viewing 12 replies - 1 through 12 (of 12 total)
  • Floats can’t be centered.

    ejcross
    Member

    @ejcross

    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.

    Jimmy
    Member

    @jayem82

    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?

    underdog74
    Member

    @underdog74

    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.

    Jimmy
    Member

    @jayem82

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

    You need {margin: 0 auto}

    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.

    ejcross
    Member

    @ejcross

    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!

    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.

    Jimmy
    Member

    @jayem82

    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!

    Jimmy
    Member

    @jayem82

    Im not using nextgen gallery anymore…

    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)

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Resolved] Centering floats’ is closed to new replies.