在图库上放置标题属性

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时，它显示如下。但我需要水平显示图像并在图像底部显示文字。

Answer 1

要使用position：absolute使其工作，您需要为父容器提供一个位置属性：

#thumbnailsList li
   position: relative

Answer 2

我使用Bootstrap响应式设计完成了它。

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