html - 在缩略图 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>