centering and spacing images in an unknown size parent container - css

Question

What I am trying to do is centre the img elements both vertically and horizontally inside the img-container. The img-container needs to be a % of the parent element not a fixed width. (ie the outer-container may not always be 1000px)
Although the code below centres the image fine withing the img-container, the width of the img-continer seems to ignore the CSS width 20%. Ie I cannnot get the img-container to get the correct (in this case 200px) width.
Any suggestions?
-Matt.
Here is my CSS
#outer-container{
width:1000px;
}
.img-container {
height:20vh;
width:20%;
vertical-align:middle;
display: table-cell;
}
.centred-img {
display:block;
margin-left:auto;
margin-right:auto;
max-height:100%;
max-width:100%;
}
Here is my HTML:
<div id="outer-container">
<div class="img-container">
<img class="centred-img" src="1.jpg">
</div>
<div class="img-container">
<img class="centred-img" src="2.jpg">
</div>
<div class="img-container">
<img class="centred-img" src="3.jpg">
</div>
<div class="img-container">
<img class="centred-img" src="4.jpg">
</div>
</div>

Answer 1

Use display:inline-block on the child elements and use text-align:center on the parent.
That should do the trick for horizontal centring. To make it centre vertically, you need to
add line-height to your images parent and vertical-align:middle to image itself.
Try using this CSS.
#outer-container{
width:500px;
border:1px solid black;
}
.img-container {
height:20vh;
width:20%;
display: inline-block;
border:1px solid black;
line-height:20vh;
text-align: center;
}
.centred-img {
vertical-align:middle;
margin-left:auto;
margin-right:auto;
max-height:100%;
max-width:100%;
}

Answer 2

Here's my fiddle just using css tables. Is this what you're looking for? The height and width are both dynamic.
http://jsfiddle.net/sinnix/dpppzuds/
<div class="container">
<div class="row">
<div class="cell">
<img src="http://placehold.it/50">
</div>
<div class="cell">
<img src="http://placehold.it/50">
</div>
<div class="cell">
<img src="http://placehold.it/50">
</div>
<div class="cell">
<img src="http://placehold.it/50">
</div>
</div>
</div>
.container {
display: table;
width: 90%; /* adjust as desired */
height: 100px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 25%;
background: magenta;
vertical-align: middle;
text-align: center;
}
.cell:nth-child(even){
background: yellow;
}