Centering floats

  • Resolved Jimmy

    (@jayem82)


    17 years, 3 months ago

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

    https://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.

    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.

    Thread Starter Jimmy

    (@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?

    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.

    Thread Starter Jimmy

    (@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}

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    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.

    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.

    Thread Starter Jimmy

    (@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:

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

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

    Thread Starter Jimmy

    (@jayem82)

    Im not using nextgen gallery anymore…

    verabass

    (@verabass)

    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 ‘Centering floats’ is closed to new replies.