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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

尝试在h1标签上使用负边距顶部样式。如果您希望使用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/

在缩略图图像上叠加文本HTML / CSS

2 个答案: