Question

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

到目前为止，我已经使用了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: 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

如果我理解你的问题，你必须给容器液体宽度以获得你想要的效果。

＆＃13;

.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; 
}

＆＃13;

 <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>

＆＃13;

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

Answer 2

在你的css代码中使用底部代码

margin:0 auto 0 auto;

叠加和中心图像css

2 个答案: