html - Overlay and center images css -


Image 3 is trying to create a banner of images with the size of 900x420 such as the picture below. I am thinking how I can coordinate them that any image is horizontally centered, any suggestions would be appreciated:

So far I have this Twitter Bootstrap: 

  & lt; Div class = "container-fluid" & gt; & Lt; Div class = "img-holder" & gt; & Lt; Img src = "img / rm1.jpg" alt = "" / & gt; & Lt; Div class = "caption" & gt; & Lt; H3 class = "title-content" & gt; Caption goes here & lt; H3 & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "img-holder" & gt; & Lt; Img src = "img / rm2.jpg" alt = "" / & gt; & Lt; Div class = "caption" & gt; & Lt; H3 class = "title-content" & gt; Caption goes here & lt; H3 & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "img-holder" & gt; & Lt; Img src = "img / rm3.jpg" alt = "" / & gt; & Lt; Div class = "caption" & gt; & Lt; H3 class = "title-content" & gt; Caption goes here & lt; H3 & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;

CSS: 

  .img-holder {float: left; Status: Relative; Background - Color: RGBA (2, 85, 165, 0.36); } .img-holder.caption {display: inline-block; Status: Completed; / * Full position (so we want it in position) * / below: 0 pixels; / * Position will be at the bottom * / left: 0 pixels; Correct: 0 pixels; Width: 100%; / * Styling Hair * / Background - Color: RGBA (0, 0, 0, 0.76); White color; } H3.title_content {padding: 10px; Margin: 0 pixels; } If I think your question is correct, then you have to give the width of the container -  
 
 
 
 
 
 . Container-fluid {width: 1400px; / * I used 450x210 image and 3 times 450 450 is 1350 so I used the width 1400 * / margin only: 0 auto; } .img-holder {float: left; Status: Relative; Background color: RGBA (2, 85, 165, 0.36); } .img-holder Caption {display: inline-block; Status: Completed; / * Full position (so we want it in position) * / bottom: 0 pixels; / * Position will be * left / right: 0 pixels; Correct: 0 pixels; Width: 100%; / * Styling Hair * / Background Color: RGBA (120,120, 120, 0.36); White color; } H3.title_content {padding: 10px; Margin: 0px; }  
 
  & lt; Div class = "container-fluid" & gt; & Lt; Div class = "img-holder" & gt; & Lt; Img src = "http://dummyimage.com/450x210/000/f23f1f.png" alt = "" / & gt; & Lt; Div class = "caption" & gt; & Lt; H3 class = "title-content" & gt; Caption goes here & lt; H3 & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "img-holder" & gt; & Lt; Img src = "http://dummyimage.com/450x210/109/acdce2.png" alt = "" / & gt; & Lt; Div class = "caption" & gt; & Lt; H3 class = "title-content" & gt; Caption goes here & lt; H3 & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "img-holder" & gt; & Lt; Img src = "http://dummyimage.com/450x210/036/0a34fe.png" alt = "" /> & Lt; Div class = "caption" & gt; & Lt; H3 class = "title-content" & gt; Caption goes here & lt; H3 & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  
 
 
 
 
 I hope you were hoping to do this.

Comments

Post a Comment