html - 将文本放置在带有覆盖层和图像的 div 的中心底部

Question

我试图将一些文本放置在包含覆盖层和图像的 div 的中心底部。

但是我怎样才能实现这个目标呢？

HTML 代码:

<div class="container">
    <div class="row team-images">
        <div class="col-sm-3">
            <div class="team-item">
                <div class="team-image-overlay"></div>
                <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
            </div>
        </div>
        <div class="col-sm-3">
            <div class="team-item">
                <div class="team-image-overlay"></div>
                <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
            </div>
        </div>
        <div class="col-sm-3">
            <div class="team-item">
                <div class="team-image-overlay"></div>
                <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
            </div>
        </div>
    </div>
</div>

CSS 代码:

.team-images .team-item {
    position: relative;
}
.team-images img {
    width: 100%;
    height: 100%;
    margin: 0 0 15px;
}
.team-images .team-image-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 128, 185, 0.4);
    color: #fff;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
    background: rgba(24, 188, 156, 0);
}

这是迄今为止创建的内容的完整示例:https://jsfiddle.net/prp794Lb/1/

Answer 1

这个怎么样？

<div class="container">
<div class="row team-images">
    <div class="col-sm-3">
        <div class="team-item">
            <div class="team-text">Text here</div>
            <div class="team-image-overlay"></div>
            <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
        </div>
    </div>
    <div class="col-sm-3">
        <div class="team-item">
            <div class="team-text">Lots and lots and lots and lots and lots of text here</div>
            <div class="team-image-overlay"></div>
            <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
        </div>
    </div>
    <div class="col-sm-3">
        <div class="team-item">
            <div class="team-text">Text here</div>
            <div class="team-image-overlay"></div>
            <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
        </div>
    </div>
</div>

    /* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
    margin: 10px;
}
.team-images .team-item {
    position: relative;
}
.team-images img {
    width: 100%;
    height: 100%;
    margin: 0 0 15px;
}
.team-images .team-image-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 128, 185, 0.4);
    color: #fff;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
    background: rgba(24, 188, 156, 0);
}
.team-item .team-text {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
}

https://jsfiddle.net/wL5Lf5se/3/