How to get this thumbnail slideshow centered - html

Question

I have absolutely no idea at this point. I have done everything I could to make sure the arrows and the thumbnail images are centered but somehow, it will not budge... I have even tried the but doesn't seem to make an affect. There is an JS file too but I don't think that really matters so I am not posting on here.
.gallery-outer {
overflow: hidden;
width: 830px;
/*left: 18px;
padding: 0 0 0 5px;*/
height: 250px;
margin-left: -50%;
float: left;
}
.gallery-inner {
float: left;
height: 140px;
position: relative;
width: 3390px;
}
.gallery-tmb {
float: left;
margin: 0 10px 0 0;
}
#gallery {
border-left: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
height: 80px;
margin: 15px;
padding: 0;
position: relative;
width: 400px;
}
#arrow-left {
background:#d1d1d1;
cursor: pointer;
height: 82px;
position: absolute;
left: -7px;
top: 0px;
width: 25px;
}
#arrow-left-small {
padding: 10px;
box-shadow: 4px -4px 0 1px black;
position: relative;
display: inline-block;
margin: 40px;
transform: rotate(225deg);
right: 27px;
top:-9px;
}
#arrow-right {
background:#d1d1d1;
cursor: pointer;
height: 82px;
position: absolute;
right: -476px;
top: 0px;
width: 25px;
}
#arrow-right-small {
padding: 10px;
box-shadow: 4px -4px 0 1px black;
position: relative;
display: inline-block;
margin: 40px;
transform: rotate(45deg);
right: 49px;
top:-9px;
}
<div id="gallery">
<div id="arrow-left">
<div id="arrow-left-small">
</div>
</div>
<div class="gallery-outer">
<div class="gallery-inner">
<div class="gallery-tmb">
<img src="images/executive1.png" alt="Executive1" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/executive2.png" alt="Executive2" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/executive3.png" alt="Executive3" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/executive4.png" alt="Executive4" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/executive5.png" alt="Executive5" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/executive6.png" alt="Executive6" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/executive7.png" alt="Executive7" height="auto" width="250"/>
</div>
</div>
</div>
<div id="arrow-right">
<div id="arrow-right-small">
</div>
</div>
</div>
(function ($) {
$.fn.thumbGallery = function (settings) {
var $this = $(this);
return this.each(function () {
settings = jQuery.extend({
speed: 800,
leftArrow: $this.find('#arrow-left'),
rightArrow: $this.find('#arrow-right'),
galleryContainer: $this.find('.gallery-inner'),
visibleImagesSize: 4
}, settings);
var imgElements = settings.galleryContainer.find('img').length;
var size = settings.visibleImagesSize;
settings.leftArrow.hide();
if (imgElements > settings.visibleImagesSize) {
settings.rightArrow.show();
} else {
settings.rightArrow.hide();
}
function animateLeft() {
var el = settings.galleryContainer.children(":last");
settings.galleryContainer.animate({
left: '+=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function animateRight() {
var el = settings.galleryContainer.children(":first");
settings.galleryContainer.animate({
left: '-=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function checkArrows() {
if (size === settings.visibleImagesSize) {
settings.leftArrow.hide();
} else {
settings.leftArrow.show();
}
if (size === imgElements) {
settings.rightArrow.hide();
} else {
settings.rightArrow.show();
}
}
settings.leftArrow.click(function () {
animateLeft();
size--;
checkArrows();
});
settings.rightArrow.click(function () {
animateRight();
size++;
checkArrows();
});
});
};
})(jQuery);
$(document).ready(function () {
$('#gallery').thumbGallery();
});

Answer 1

Solution with use of flexbox.
.gallery-outer {
overflow: hidden;
width: 830px;
/*left: 18px;
padding: 0 0 0 5px;*/
height: 250px;
}
.gallery-inner {
float: left;
height: 100%;
position: relative;
width: 3390px;
}
.gallery-tmb {
float: left;
margin: 0 10px 0 0;
}
#gallery {
border-left: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
display: flex;
justify-content: space-between;
margin: 15px;
padding: 0;
position: relative;
width: 800px;
}
#arrow-left {
background:#d1d1d1;
cursor: pointer;
height: 82px;
width: 25px;
align-self: center;
}
#arrow-left-small {
padding: 10px;
box-shadow: 4px -4px 0 1px black;
position: relative;
display: inline-block;
margin: 40px;
transform: rotate(225deg);
right: 27px;
top:-9px;
}
#arrow-right {
background:#d1d1d1;
cursor: pointer;
height: 82px;
width: 25px;
align-self: center;
}
#arrow-right-small {
padding: 10px;
box-shadow: 4px -4px 0 1px black;
position: relative;
display: inline-block;
margin: 40px;
transform: rotate(45deg);
right: 49px;
top:-9px;
}
Flexbox solution

Answer 2

I just built you an example with all the basics.
I don't recommend float abuse, only use it when really needed.
// HOPE IT HELPS
.gallery{
max-width: 600px;
margin: 0 auto;
text-align: center; /* this will center all the inline and inline-block content */
background: purple;
}
.arrow-left,.arrow-right{
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
background: blue;
color: white;
font-size: 5rem; /* just to make arrows show */
}
/* this is just to make the arrows show :p */
.arrow-left:before{
content: '←';
}
.arrow-right:after{
content: '→';
}
/* i'm just between the arrows and also inline (inline-block)*/
.gallery ul{
vertical-align: middle;
background: green;
margin: 0;
padding: 0;
display: inline-block;
}
/* where the images will go (you can use divs instead of ul, li) */
.gallery li {
display: inline-block;
}
img {
background: red;
width: 100px;
height:100px;
}
<div class="gallery">
<div class="arrow-left"></div>
<ul>
<li><img src="#" width=100 height=100 /></li>
<li><img src="#" width=100 height=100 /></li>
<li><img src="#" width=100 height=100 /></li>
</ul>
<div class="arrow-right">
</div>
</div>

Answer 3

You can use a bootstrap template like this:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.thumbnail{
height: 200px;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fulid">
<div class="row">
<div class="col-md-2 text-right">
<span class="glyphicon glyphicon-chevron-left" style="margin-top:20%"></span>
</div>
<div class="col-md-2">
<div class="thumbnail">
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
</div>
</div>
<div class="col-md-2 text-left">
<span class="glyphicon glyphicon-chevron-right" style="margin-top:20%"></span>
</div>
</div>
</div>
</div>
</body>
</html>