[NextGen Gallery] How to center the thumbnails (9 posts)

  1. RTL93
    Posted 6 years ago #

    Ok so when i add thumbnails of images to a post how do i get them to be centered?

  2. Lee
    Posted 6 years ago #

    I guess it will depend whether you are asking how to center individual thumbnails or how to center a collection of thumbnails, but, and this is a stab in the dark, generally:

    in html, <div align="center">Image Code</div>

    Replace "Image Code" with the short-tags.

    Also, have you tried highlighting your thumbnail code and clicking TinyMCE's align-center button?

  3. RTL93
    Posted 6 years ago #

    Is the TinyMCE thing a plugin? Because I tried centering them by clicking the center box on wordpress but it didnt work. And I am trying to center multiple thumbnail images in one post. they are all aligned to the left and it looks bad.

  4. Lee
    Posted 6 years ago #

    The editor box IS TinyMCE.

    All you need to do, to center anything that the centering button wont, is view the html code for your post, then encase the specific bit of text or the specific code in <div> tags (a <div> tag is just a "dividing" self contained block within a page). For example,

    <div align="center">
    [album id=x template=extend]

    Notice that the second <div> has a forward slash "/" in it, thus </div>. That forward slash closes the container so is very important.

  5. Lee
    Posted 6 years ago #

    I didn't realise there were so many add-on plugins for the NextGEN Gallery. I've installed in one of my blogs but have yet to use it.

    The extra's are viewable at:


  6. imbrettjackson
    Posted 6 years ago #

    I'm having the exact same problem. I can't get a gallery to center and it's driving me crazy because it is just a few pixels left justified.


    I used the <div align="center"> method without success.

    Love any insights on how I could get this gallery centered.

  7. simplyolivia
    Posted 5 years ago #

    Has anyone ever solved this?

  8. insomnium
    Posted 5 years ago #

    replace with

    .ngg-galleryoverview {
    text-align: center;
    overflow: hidden;
    margin-top: 10px;
    width: 100%;
    .ngg-gallery-thumbnail-box {
    display: inline-block;

  9. bestlight
    Posted 5 years ago #

    Insomnium's suggestion worked for me, except that I used align rather than text-align.

    Many thanks!

    Edit: Oh, yes! And I also added this to the actual page:

    <div align="center";>[nggallery id=2]</div>

    So I still have more to understand!

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.