I'm struggling with this issue, trying to center my images. It seems like the first image referenced in imgTop is centered while the second one goes to the right. I want both to be centered evenly. Any help would be appreciated!
#imageContainer {
width: 100%;
text-align: center;
}
.imgTop {
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 60px;
height: 40px;
padding-left: 85pt;
padding-right: 85pt;
}
.imgBottom {
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 60px;
height: 40px;
padding-left: 85pt;
padding-right: 85pt;
}<div id="imageContainer">
<div class="imgTop">
<a class="imageSlot">
<img src="src/gameImages/img3.jpg">
</a>
</div>
<div class="imgTop">
<a class="imageSlot">
<img src="src/gameImages/img4.jpg">
</a>
</div>
</div>
<div id="imageContainer">
<div class="imgBottom">
<a class="imageSlot">
<img src="src/gameImages/img4.jpg">
</a>
</div>
<div class="imgBottom">
<a class="imageSlot">
<img src="src/gameImages/img3.jpg">
</a>
</div>
</div>