This example demonstrates an issue with centering images inside an anchor tag (within a div). I find it perplexing - why does the first image have more space above it than below? Can anyone assist me in resolving this?
Here is the HTML code:
<div id="parent">
<ul class="other-images">
<li>
<a href="#">
<img src="http://www.abc.net.au/radionational/image/4220698-3x2-700x467.jpg">
</a>
</li>
<li>
<a href="#">
<img src="http://us.123rf.com/400wm/400/400/malopes/malopes0901/malopes090100089/4185805-beatiful-spring-landscape-with-grass-and-sky--portrait-orientation.jpg">
</a>
</li>
<li>
<a href="#">
<img src="http://resources2.news.com.au/images/2012/09/09/1226468/512770-images.jpg">
</a>
</li>
</ul>
</div>
And here is the CSS code:
#parent{
background: gray;
width: 500px;
height: 500px;
padding: 10px;
}
.other-images{
display: block;
padding: 0;
margin: 0 -2%;
overflow: hidden;
}
.other-images > li:nth-of-type(8n+1) {
clear: both;
}
.other-images > li:nth-of-type(n) {
clear: none;
}
.other-images > li {
display: inline-block;
height: 35px;
float: left;
margin: 0 2% 4%;
width: 9%;
}
.other-images > li > a {
background: red;
display: inline-block;
border: 1px solid #aaa;
height: 100%;
width: 100%;
line-height: 35px;
text-align: center;
}
img{
max-width:100%;
max-height:100%;
display: inline-block;
vertical-align: middle;
}