Doing a page of images with captions below. The images are of very different sizes and proportions.
Style:
.center {margin:0 auto; width:80%; max-width:1000px; border:1px solid black;}
.content {margin-left:2%;}
.pic {width:23%; margin-left:1%; vertical-align:bottom;}
.txt {width:23%; margin-left:1%; vertical-align:text-top; text-align:center; display:inline-block; background-color:yellow;}
HTML:
<div class="center">
<div class="content">
<img class="pic" alt="x" src="ottersonrocks.jpg">
<img class="pic" alt="x" src="clocktowerwest.jpg">
<img class="pic" alt="x" src="otters&ivy.jpg">
<img class="pic" alt="x" src="otterstails.jpg">
<h3 class="txt">balh blah</h3>
<h3 class="txt">lots of drivelin and stuff on and on<br></h3>
<h3 class="txt">tripe</h3>
<h3 class="txt">eh?</h3>
</div>
</div><!--end center-->
Almost working but can't see why I'm getting an unwanted white space between image and caption as here:
Any CSS experts see why? Cheers!
PS "Solutions" I've found online don't work, display:block; screws things up totally, setting background-size, border, padding, margin etc make no difference.
Style:
.center {margin:0 auto; width:80%; max-width:1000px; border:1px solid black;}
.content {margin-left:2%;}
.pic {width:23%; margin-left:1%; vertical-align:bottom;}
.txt {width:23%; margin-left:1%; vertical-align:text-top; text-align:center; display:inline-block; background-color:yellow;}
HTML:
<div class="center">
<div class="content">
<img class="pic" alt="x" src="ottersonrocks.jpg">
<img class="pic" alt="x" src="clocktowerwest.jpg">
<img class="pic" alt="x" src="otters&ivy.jpg">
<img class="pic" alt="x" src="otterstails.jpg">
<h3 class="txt">balh blah</h3>
<h3 class="txt">lots of drivelin and stuff on and on<br></h3>
<h3 class="txt">tripe</h3>
<h3 class="txt">eh?</h3>
</div>
</div><!--end center-->
Almost working but can't see why I'm getting an unwanted white space between image and caption as here:
Any CSS experts see why? Cheers!
PS "Solutions" I've found online don't work, display:block; screws things up totally, setting background-size, border, padding, margin etc make no difference.
Comment