Center gallery on a page

  • Resolved TomSaunders

    (@tomsaunders)


    8 years, 7 months ago

    Can’t figure out how to make galleries center on the page, for example here.

    Probably some bad CSS I added or something but I have no clue. I have tried CSS, wrapping the gallery shortcode in html, have tried investigations with firebug etc, all to no avail. Pulling my hair out over a stupid gallery!

    Thank you in advance!

Viewing 11 replies - 1 through 11 (of 11 total)

  • Hi Tom. In your child theme CSS try removing the float and adding a centering margin:

    #gallery-1 .gallery-item {
    padding-right: 1% !important;
    padding-bottom: 1% !important;
    width: 61.2% !important;
    float: none !important;
    margin: 0 auto !important;
    }
    Thread Starter TomSaunders

    (@tomsaunders)

    Hmm, now the images appear to be upscaled. Should I adjust the width %?

    Thanks as always bdbrown, really appreciate it.

    Thread Starter TomSaunders

    (@tomsaunders)

    Weird. I change that one part of my child CSS and now other styling properties change too – for example, links are now underlined, and the topbar menu is black not the original blue…

    You have a double entry for the element in the CSS:

    #gallery-1 .gallery-item {      <===== remove this line
    #gallery-1 .gallery-item {
    	padding-right: 1% !important;
    	padding-bottom: 1% !important;
   	width: 61.2% !important;
    	float: none !important;
    	margin: 0 auto !important;
}
    Thread Starter TomSaunders

    (@tomsaunders)

    Had extra bracket in CSS which fixed the issue I caused! Your code fixed the original, thanks bdbrown!

    You’re most welcome.

    Thread Starter TomSaunders

    (@tomsaunders)

    One more thing, sorry!

    Just noticed that the right side of the images appears to be cut off by a couple pixels, even though the image is appearing full size. Any ideas?

    Thread Starter TomSaunders

    (@tomsaunders)

    Ah just saw the double entry you mentioned, perfect, cheers!

    Try changing the item width to 60%:

    #gallery-1 .gallery-item {
    padding-right: 1% !important;
    padding-bottom: 1% !important;
    width: 60% !important;
    float: none !important;
    margin: 0 auto !important;
}
    chinnynfdjshvbu32z87z3487

    (@chinnynfdjshvbu32z87z3487)

    This is the first code that really worked for me. Thank you very much!

    Nevertheless: Now all images are centered in my gallery but they are now underneath each other. So this gallery is not a row like usually. How do show the images as a row again? Making the width smaller does not help.

    chinnynfdjshvbu32z87z3487

    (@chinnynfdjshvbu32z87z3487)

    It worked with the following code

    
#gallery-1 .gallery-item {
    padding-right: 1% !important;
    padding-bottom: 2% !important;
    width: 23% !important;
    float: none !important;
    margin: 0 auto !important;
    display: inline-block !important;
}

.wp-caption-text {
    font-size: 0.6rem;
    font-style: italic;
}
.gallery .gallery-icon a {
    padding: 1px;
}

    Had to adjust the font size of the gallery caption and adding “display: inline-block !important;” + adjusting the image width.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Center gallery on a page’ is closed to new replies.