First of all, I'm kinda new to CSS, so forgive me if this is a stupid question, or my code doesn't make much sense - I've tried solving my issue, and haven't had much luck so far.
I'm having trouble centering an image, inside a div which should make a border around the image - I've made a JFiddle to further explain:
https://jsfiddle.net/9yxco7ez/
The idea is that the image should be in the center of the bordered div around it.
HTML:
<div class="sponsorLogos">
<ul class="sponsorGallery">
<li class="sponsorImg" ng-repeat="path in sponsorLogos">
<a href="#">
<img src="http://www.garcard.com/images/garcard_symbol.png">
</a>
</li>
</ul>
</div>
CSS:
.sponsorLogos ul li {
margin: 10px 10px;
display: inline-block;
height: 128px;
width: 128px;
border: solid 5px #e0e5eb;
overflow: hidden;
}
.sponsorsDiv .sponsorLogos img {
display: block;
margin-left: auto;
margin-right: auto;
}
I've found a few topics on here to try and solve my problem, but haven't yet succeeded.. I know theres probably the right answer out there, but I haven't been able to find it, so sorry in advance if this question is answered elsewhere..
