覆蓋和中心圖像css

-1

我試圖創建一個尺寸爲900x420的3幅圖像的橫幅，如底部的圖片。林想知道如何讓他們對齊，每個圖像以某種方式水平居中。任何建議，將不勝感激： a busy cat http://i62.tinypic.com/208u0is.png 覆蓋和中心圖像css

到目前爲止，我有這個與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; 
}

來源

2014-10-27 Andrés Da Viá

如果我理解你的問題，你必須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>

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

來源

2014-10-27 21:34:43 Sai

嗯，這是安靜的關閉，但正如你所看到的圖像疊加在某種程度上，我不認爲你需要指定一個容器的寬度。你可以看到每個圖像都是900x420，它們覆蓋的方式有什麼變化 – 2014-10-27 21:48:13

你是說你想讓標題位於圖像的中心嗎？ – Sai 2014-10-27 21:50:32

號碼字幕在這裏沒有任何事情要做。你在你的例子中做過的同樣的事情，圖片尺寸爲900x420，而不是450x210，需要將所有圖片以某種方式疊加在一起，才能正確修復 – 2014-10-27 21:55:42

-1

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

margin:0 auto 0 auto;

來源

2014-10-27 21:19:39 sia

你在哪裏建議OP添加該CSS屬性？！ – Sai 2014-10-27 21:37:07

覆蓋和中心圖像css

回答

相關問題