Centering multiple images horizontally and vertically using display: table - html

Question

So using the display: table; technique I have centered a single image. The behaviour exhibited by this single image in the example is perfect for me; only I would like to also allow for multiple portrait images to be centered side by side in the container and centered in exactly the same manner.
.slider-container {
left: 75px;
right: 75px;
position: fixed;
top: 75px;
height: calc(100vh - 150px);
}
.slider-container .table {
display: table;
height: inherit;
width: 100%
}
.slider-container .table .col {
display: table-cell;
width: 100%;
height: inherit;
vertical-align: middle;
text-align: center
}
.slider-container .table .col img {
max-height: 100%;
max-width: 100%;
}
<div class="slider-container">
<div class="table">
<div class="col">
<img src="https://www.top-windows-tutorials.com/images/2013/04/2014-03-Windows-Xp-Bliss-wallpaper.jpg">
</div>
</div>
</div>
Jsfiddle here if you prefer.
This is close to what I am aiming for but would like to be able to control the size of the spacing between each image so that it is always a fixed amount – at the minute the table cells are wider than the images within them and this is cause the gap to be greater that it should be, depending on screen size:
.slider-container {
left: 75px;
right: 75px;
position: fixed;
top: 75px;
height: calc(100vh - 150px);
}
.slider-container .table {
display: table;
height: inherit;
width: 100%
}
.slider-container .table .row {
display: table-row;
width: 100%;
height: inherit;
vertical-align: middle;
text-align: center;
}
.slider-container .table .row .cell {
display: table-cell;
width: 33%;
height: inherit;
vertical-align: middle;
font-size: 0;
padding-right: 15px;
padding-left: 15px;
}
.slider-container .table .row .cell img {
max-height: 100%;
max-width: 100%;
}
.left-cell {
text-align: right;
}
.middle-cell {
text-align: center;
}
.right-cell {
text-align: left;
}
<div class="slider-container">
<div class="table">
<div class="row">
<div class="cell left-cell"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
<div class="cell middle-cell"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
<div class="cell right-cell"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
</div>
</div>
</div>
Jsfiddle here
As you can see the spacing changes between the images – I would like to set it as a controllable amount. The table cell size is currently larger than the image itself which I want to prevent.
Thanks,

Answer 1

.slider-container {
left: 75px;
right: 75px;
position: fixed;
top: 75px;
height: calc(100vh - 150px);
}
.slider-container .table {
display: table;
height: inherit;
width: 100%
}
.slider-container .table .col {
display: table-row;
width: 100%;
height: inherit;
vertical-align: middle;
text-align: center;
}
.slider-container .table .col img {
max-height: 100%;
max-width: 100%;
}
.third {
display: table-cell;
width: 33%;
height: inherit;
vertical-align: middle;
text-align: center;
}
<div class="slider-container">
<div class="table">
<div class="col">
<div class="third"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
<div class="third"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
<div class="third"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
</div>
</div>
</div>

Answer 2

I would suggest to simplify the structure a bit as shown below: Just have the table and a cell with three images inside it (no row necessary), and center the contents of that cell as you did. To avoid any space between the images, I added font-size: 0 for the cell:
.slider-container {
left: 75px;
right: 75px;
position: fixed;
top: 75px;
height: calc(100vh - 150px);
}
.slider-container .table {
display: table;
height: inherit;
width: 100%
}
.slider-container .table .col {
display: table-cell;
width: 100%;
height: inherit;
vertical-align: middle;
text-align: center;
font-size: 0;
}
.slider-container .table .col img {
max-height: 100%;
max-width: 100%;
}
<div class="slider-container">
<div class="table">
<div class="col">
<img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png">
<img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png">
<img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png">
</div>
</div>
</div>

Answer 3

You can use relative units (%) together with the transform property:
body {margin: 0}
.slider-container {
position: fixed;
left: 50%; /* moved right by 50% */
top: 50%; /* moved down by 50% */
transform: translate(-50%,-50%); /* moved left and up by 50% of its w/h to achieve the perfect center */
}
.slider-container .table {
display: table;
height: inherit;
width: 100%;
}
.slider-container .table .col {
display: table-cell;
width: 100%;
height: inherit;
vertical-align: middle;
text-align: center;
}
.third {
display: table-cell;
width: 33.33%; /* modified for accuracy */
height: inherit;
vertical-align: middle;
text-align: center;
}
.third > img { /* modified */
display: block; /* removes bottom margin/whitespace */
max-width: 100%;
max-height: 100vh; /* modified, vertical responsiveness */
}
<div class="slider-container">
<div class="table">
<div class="col">
<div class="third"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
<div class="third"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
<div class="third"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
</div>
</div>
</div>