I am attempting to design a banner consisting of 3 images, each with dimensions of 900x420, similar to the image shown below. I am looking for advice on how to align these images such that they are horizontally centered. Any suggestions would be greatly appreciated: https://i.stack.imgur.com/5rgg6.jpg
Currently, I have tried using Twitter Bootstrap:
<div class="container-fluid">
<div class="img-holder">
<img src="img/rm1.jpg" alt="" />
<div class="caption">
<h3 class="title-content">Caption goes here<h3>
</div>
</div>
<div class="img-holder">
<img src="img/rm2.jpg" alt="" />
<div class="caption">
<h3 class="title-content">Caption goes here<h3>
</div>
</div>
<div class="img-holder">
<img src="img/rm3.jpg" alt="" />
<div class="caption">
<h3 class="title-content">Caption goes here<h3>
</div>
</div>
</div>
CSS:
.img-holder {
float: left;
position: relative;
background-color: rgba(2, 85, 165, 0.36);
}
.img-holder.caption {
display: inline-block;
position: absolute; /* absolute position (so we can position it where we want)*/
bottom: 0px; /* positioned at the bottom */
left: 0px;
right: 0px;
width: 100%;
/* styling below */
background-color: rgba(0, 0, 0, 0.76);
color: white;
}
h3.title_content {
padding: 10px;
margin: 0px;
}