画像ギャラリーにtitleプロパティを設定する

Question

以下に示すように画像ギャラリーを作成する必要があります。それはうまくいっていますが、画像の下にタイトルを付ける必要があります（それぞれの画像にタイトルが付いています）。私が以下のように試してみると、そのタイトルは正しく表示されていません。あなたは私にそのことを教えてもらえますか？

Htmlの

<ul id="thumbnailsList"> 
    <li *ngFor="let image of datasource"> 

     <img src="{{image.url}}" class="tn" data-toggle="modal" data-target="#selectedImageModal" (click)=setSelectedImage(image)> 
     <div class="myClass"><strong>{{image.title}}</strong></div> 


    </li> 
</ul> 

CSS

.myClass { 
    position: absolute; 
} 

結果：

アップデート：私は.myClassを削除する場合

それはbelow.Butのように、私は水平方向の画像と画像のテキスト底を表示する必要があります示しています。

Answer 1

。

HTML

<div class="row"> 
    <div *ngFor="let image of dataCollection" class="col-md-3 col-sm-4 col-xs-6"> 
     <img class="img-responsive tn" src="{{image.blobFileUrl}}" data-toggle="modal" data-target="#selectedImageModal" (click)=setSelectedImage(image) /> 
     <div class="desc">{{image.name}}</div> 
    </div> 
</div> 

CSS

div.desc { 
    padding: 15px; 
    text-align: center; 
} 

.tn { 
    margin: 2px 0px; 
    box-shadow: #999 1px 1px 3px 1px; 
    cursor: pointer; 
    width: 100% !important; 
    height: 200px !important; 
} 

Answer 2

は、それが位置を使用して動作させるために：絶対、あなたは親コンテナにやっ位置性を付与する必要があります：私はブートストラップ応答デザインを使用してそれを行っている

#thumbnailsList li 
    position: relative