CODEWITHSUNDEEP
jquerycssgallerythumbnailscenter
MasTArrrRR
MasTArrrRR

Reputation: 11

How To Center Thumbnails Of jQuery LightGallery With In Dynamic CSS Website

Hey I was wondering if you can help me quickly. I have completely implemented everything and just having a slight issue with the centering of my ul coding. I have tried what is stated here and it’s not working. I've done it with the base coding, the HTML, with CSS, etc. And nothing so this is my coding and any advice would be really really truly greatly appreciated. (Can you tell I’m stressed for my client?)

<body>
    <header>
        <h2><center><img src="img/hdr-horsd.jpg"  style="width: 50%"></center></h2><br><br>
    </header>
    <ul id="light-gallery" class="gallery">
        <li data-src="gallery/horsd-01.jpg">
            <a href="#">
            <img src="gallery/t-horsd-01.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-02.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-02.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-03.jpg">
            <a href="#">
            <img src="gallery/t-horsd-03.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-04.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-04.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-05.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-05.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-06.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-06.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-07.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-07.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-08.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-08.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-09.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-09.jpg" />
            </a>
        </li>
    </ul>
</body>

And then the custom CSS on the page is as follows:

    <!-- == Custom CSS Coding == -->
    <style>
        ul{
            list-style: none outside none;
            padding-left: 0;
        }
        .gallery li {
    display: block;
    float: left;
    height: 100px;
    margin-bottom: 6px;
    margin-right: 6px;
    width: 100px;
}
        .gallery li a {
            height: 100px;
            width: 100px;
        }
        .gallery li a img {
            max-width: 100px;
        }
    </style>

I know now it doesn't have any centering code in there, but that"s because I have removed it for it wasn't working and wanted to keep the code clean. The photo gallery I'm using that i want the thumbs to be centered for is called jQuery lightGallery

Upvotes: 1

Views: 2490

Answers (4)

Alexander Loushkin
Alexander Loushkin

Reputation: 1

For the version 1.3.5 inside your html document use

<style> ul.lSPager.lSGallery { margin-left: auto !important; margin-right: auto !important; } </style>

That worked for me

Upvotes: 0

Webster Teston
Webster Teston

Reputation: 11

div.lg-thumb.group {
margin-left: auto !important;
margin-right: auto !important;
}

this worker me in the latest release...

Upvotes: 1

Rob I
Rob I

Reputation: 71

Hi this may be a little late, but I had the same exact question and figured it out using Chrome Dev Tools. In your custom.css file, add:

#lg-gallery .thumb-cont .thumb-inner {
    margin-left: auto;
    margin-right: auto;
}

Upvotes: 3

seahorse
seahorse

Reputation: 1

html:

<body>
<header>
    <h2><center><img src="img/hdr-horsd.jpg"  style="width: 50%"></center></h2><br><br>
</header>
    <div id="wrap">
        <ul id="light-gallery" class="gallery">
            <li data-src="gallery/horsd-01.jpg">
                <a href="#">
                <img src="gallery/t-horsd-01.jpg" />
                </a>
            </li>
            <li data-src="gallery/horsd-02.jpg" >
                <a href="#">
                <img src="gallery/t-horsd-02.jpg" />
                </a>
            </li>
            <li data-src="gallery/horsd-03.jpg">
                <a href="#">
                <img src="gallery/t-horsd-03.jpg" />
                </a>
            </li>
            <li data-src="gallery/horsd-04.jpg" >
                <a href="#">
                <img src="gallery/t-horsd-04.jpg" />
                </a>
            </li>
            <li data-src="gallery/horsd-05.jpg" >
                <a href="#">
                <img src="gallery/t-horsd-05.jpg" />
                </a>
            </li>
            <li data-src="gallery/horsd-06.jpg" >
                <a href="#">
                <img src="gallery/t-horsd-06.jpg" />
                </a>
            </li>
            <li data-src="gallery/horsd-07.jpg" >
                <a href="#">
                <img src="gallery/t-horsd-07.jpg" />
                </a>
            </li>
            <li data-src="gallery/horsd-08.jpg" >
                <a href="#">
                <img src="gallery/t-horsd-08.jpg" />
                </a>
            </li>
            <li data-src="gallery/horsd-09.jpg" >
                <a href="#">
                <img src="gallery/t-horsd-09.jpg" />
                </a>
            </li>
        </ul>
    </div>

css:

   #wrap{
    margin:0px auto;
    padding:0px;
    width:1100px;
    height: 106px;
    text-align: center;
    }

   ul.gallery{
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .gallery li {
    height: 100px;
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 6px;
    width: 100px;
    }

    .gallery li:last-child {
    margin-right: 0;
    }

    .gallery li a {
        height: 100px;
        width: 100px;
    }
    .gallery li a img {
        max-width: 100px;
    }

Upvotes: 0

Related Questions