How To Center Thumbnails Of jQuery LightGallery With In Dynamic CSS Website -
hey wondering if can me quickly. have implemented , having slight issue centering of ul coding. have tried stated here , it’s not working. i've done base coding, html, css, etc. , nothing coding , advice really appreciated. (can tell i’m stressed 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 custom css on page 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 { height: 100px; width: 100px; } .gallery li img { max-width: 100px; } </style>
i know doesn't have centering code in there, that"s because have removed wasn't working , wanted keep code clean. photo gallery i'm using want thumbs centered called jquery lightgallery
hi may little late, had same exact question , figured out using chrome dev tools. in custom.css file, add:
#lg-gallery .thumb-cont .thumb-inner { margin-left: auto; margin-right: auto; }
Comments
Post a Comment