Looking to arrange images in a left-to-right flow while keeping them centered on the screen:
https://i.stack.imgur.com/WHBv9.png However, I'm struggling to achieve this as the last image always ends up centered horizontally as shown below:
https://i.stack.imgur.com/X2QAq.png
Is there a way to align them in that order and still maintain the center positioning?
In my CSS, I'm using display: inline-block within #gallery > div
CODE: https://jsfiddle.net/m9xuj8aa/
HTML:
<div class="container">
<header>
<div id="logo">
<img src="" alt="">
</div>
<nav class="cl-effect-21">
<ul>
<li>
<a href="index.html" class="scroll">
<span data-hover="Home">Home</span>
</a>
</li>
// More list items
</ul>
</nav>
</header>
<div class="portfolio clearfix">
<div id="gallery">
<div id="img-wrapper">
<a href="image.jpg">
<img src="image.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
// More image wrappers
</div>
</div>
<div class="push"></div>
</div>
// Footer section
CSS:
/** External Stylesheet **/
.container {
min-height: 100%;
margin: 0 auto -60px;
}
footer, .push {
height: 20px;
padding: 20px 0px;
}
.cl-effect-21 a {
/* Styling for link effects */
}
/* Additional styles for header, gallery, etc. */
.portfolio {
width: 100%;
margin:0 auto;
}
#gallery {
width: 100%;
margin:0 auto;
display: table;
text-align: center;
}
#gallery img {
width: 100%;
height: auto;
}
#gallery > div {
/* Image block styling */
}
#gallery a div {
/* Overlay styling */
}
.clearfix {
clear: both;
}