覆盖和中心图像css

Question

我试图创建一个尺寸为900x420的3幅图像的横幅，如底部的图片。林想知道如何让他们对齐，每个图像以某种方式水平居中。任何建议，将不胜感激： a busy cat http://i62.tinypic.com/208u0is.png

到目前为止，我有这个与Twitter的引导：

<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: 0 px; /* position will be on bottom */ 
     left: 0 px; 
     right: 0 px; 
     width: 100 % ; 
     /* styling bellow */ 
     background - color: rgba(0, 0, 0, 0.76); 
     color: white; 
    } 

h3.title_content { 
    padding: 10 px; 
    margin: 0 px; 
} 

Answer 1

如果我理解你的问题，你必须gi对容器液体有一定的宽度以获得所需的效果。

.container-fluid{ 
 
    width:1400px; /* i used 450x210 image and 3 times 450 is 1350 hence i just used width 1400 */ 
 
    margin: 0 auto; 
 
} 
 
.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; /* position will be on bottom */ 
 
left:0px; 
 
right: 0px; 
 
width:100%; 
 
/* styling bellow */ 
 
background-color:rgba(120,120, 120, 0.36); 
 
color:white; 
 
} 
 

 
h3.title_content{ 
 
padding:10px; 
 
margin:0px; 
 
}

<div class="container-fluid"> 
 
    <div class="img-holder"> 
 
     <img src="http://dummyimage.com/450x210/000/f23f1f.png" alt="" /> 
 
     <div class="caption"> 
 
      <h3 class="title-content">Caption goes here<h3> 
 
     </div> 
 
    </div> 
 
    <div class="img-holder"> 
 
     <img src="http://dummyimage.com/450x210/109/acdce2.png" alt="" /> 
 
     <div class="caption"> 
 
      <h3 class="title-content">Caption goes here<h3> 
 
     </div> 
 
    </div> 
 
    <div class="img-holder"> 
 
     <img src="http://dummyimage.com/450x210/036/0a34fe.png" alt="" /> 
 
     <div class="caption"> 
 
      <h3 class="title-content">Caption goes here<h3> 
 
     </div> 
 
    </div>  
 
</div>

我希望这是你正期待的事情。

Answer 2

使用底部的代码在你的CSS代码

margin:0 auto 0 auto;