I have tried using lightGallery plugin for displaying a gallery, but when I click on an image it show them in half and on the side like this. All I want is to center the image. I have looked on the inspector and found some not friendly css markups and styles which I don't understand. Please help
<link rel="stylesheet" href="css/lightgallery.min.css">
<div id="photos">
<a href="img/r/one.png">
<img src="holder.js/200x200?auto=yes&random=yes" alt="">
</a>
<a href="img/r/two.jpg">
<img src="holder.js/200x200?auto=yes&random=yes" alt="">
</a>
</div>
and javascript is
<script src="js/vendor/lightgallery-all.min.js"></script>
$(function () {
$("#photos").lightGallery();
})
I don't know what's wrong, I have searched the net and found nothing. Maybe because I don't know what to search for.