Center-Float Gallery Thumnails

  • Resolved yakuza-ua

    (@yakuza-ua)


    11 years, 2 months ago

    Me again

    I wonder if there’s a way to center-float gallery thumbnails? I usually display thumbs as a galleries (even if I only need to display one or two thumbs in a row).

    I noticed that if I have 1 or 2 thumbs in a gallery they float to the left. Is there a way to center them? If I have one – center it, if I have two – stick in one line and center them…

    I tried to change it with my custom CSS… by doing this:

    div.gallery dl.gallery-item {
	float: none;
	display: inline-block;
}

    But that didn’t help. I tried to use Google CSS Inspection engine and it seems my properties are overridden by smth else. CSS inspection says that Computed CSS property is left for float and block for display.

    Can you please point me in the right direction?

    Thanks

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Let’s see the page in question

    Thread Starter yakuza-ua

    (@yakuza-ua)

    Here it is

    https://retrogames.com.ua/workshop/repair/n64_pad_recovery.html

    I want to center gallery thumbs even though there’s only one in line.. or two..

    Thanks in advance.

    You are close there I think with your CSS, try adding text align center on the wrapper as well:

    .entry .gallery { text-align: center; }
div.gallery dl.gallery-item { float: none; display: inline-block; }

    Thread Starter yakuza-ua

    (@yakuza-ua)

    wow! you rock ?? that worked just perfectly ??

    now I need to move the “share” bar somehow… make it vertical float and stick it to the most-right position (move it out of the main content area) ??

    will do it later though as I need to concentrate my efforts on my last ccnp exam now ??

    thanks for your help!

    Thread Starter yakuza-ua

    (@yakuza-ua)

    forgot to mark as resolved. it is indeed.

    Thread Starter yakuza-ua

    (@yakuza-ua)

    To early to be happy ??

    It worked when I directly implemented those properties via Chrome CSS Inspection… but, it doesn’t work if I apply it to the customs CSS and the reason is that every gallery is preceded by a gallery-specific CSS block that overrides all stylesheets added to the page earlier…

    for example, my custom CSS has this

    .entry .gallery { text-align: center; }
div.gallery dl.gallery-item { float: none; display: inline-block; }

    If I view page’s html code, I see this right before gallery code

    <style type='text/css'>
			#gallery-3 {
				margin: auto;
			}
			#gallery-3 .gallery-item {
				float: left;
				margin-top: 10px;
				text-align: center;
				width: 33%;
			}
			#gallery-3 img {
				border: 2px solid #cfcfcf;
			}
			#gallery-3 .gallery-caption {
				margin-left: 0;
			}
			/* see gallery_shortcode() in wp-includes/media.php */
		</style>

    As you can see, my float:none is being overridden by float:left… and this CSS is very very specific (#gallery-ID is being used to reference that unique gallery).

    Where does this CSS come from? How can I change that?

    Thanks

    Thread Starter yakuza-ua

    (@yakuza-ua)

    Well, found it
    It’s hardcoded in the gallery_shortcode() in wp-includes/media.php

    Huh… wtf? Why do they hardcode it? It’s so unusual for WP standards.

    Yeah, it’s pretty strange. Do this to override:

    .entry .gallery { text-align: center!important; }
div.gallery dl.gallery-item { float: none!important; display: inline-block!important; }

    Good luck with the exam ??

    Thread Starter yakuza-ua

    (@yakuza-ua)

    Wunderbar! Awesome!
    Thank you very much for being patient and very helpful! ??

    Yeah, exam… switching to it now ?? Speak soon

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Center-Float Gallery Thumnails’ is closed to new replies.

Tags