在缩略图图像HTML / CSS上覆盖文本

Question

我正在尝试将一些文本叠加到缩略图类图像上。 我的HTML看起来像这样：

            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="GreatDanesEdit.jpg" width="700" height="700">
                    <h1>Game Day</h1>
                </div>
            </div>

我在CSS上使用什么来使我的“ h1”覆盖图像？ 我似乎只能把它写在它的下面。 理想情况下，我也希望文字也以图片为中心。

目前，我的CSS看起来像这样，如何将文本居中放置在图像上？

.thumbnail{
  position:relative;
}

.thumbnail h1{
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    margin:0;
    color:#551A8B;
    text-shadow: 0 0 5px #fff;
    font-size: 48px;  
    font-family: 'Shift', sans-serif;
    font-weight: bold;
    text-align:centre;
}

谢谢！

Answer 1

对.thumbnail元素使用relative定位，对h1元素使用absolute定位：

 .thumbnail{ width:300px; position:relative; } .thumbnail img{ max-width:100%; } .thumbnail h1{ position:absolute; top:50%; left:0; color:lightgrey; width:100%; text-align:center; transform:translateY(-50%); /* doesn't work in IE9 and older I'm affraid */ margin:0; } 

 <div class="col-md-4"> <div class="thumbnail"> <img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Nail(thumb).jpg"> <h1>Game Day</h1> </div> </div> 

Answer 2

尝试在您的h1标签上使用负空白边距样式。 如果希望使用align="center"将其居中，也可以将其居中align="center" 。

更新的代码：

        <div class="col-md-4">
            <div class="thumbnail">
                <img src="GreatDanesEdit.jpg" width="700" height="700">
            <h1 align="center" style="margin-top:-350px;">Game Day</h1>
            </div>
        </div>

小提琴示例： https : //jsfiddle.net/pbubqt5y/