Question

我正在尝试在图片底部显示简短的图片说明，现在它看起来像这样：https://www.bootply.com/render/Gwde8WHtot

但我希望绿色背景与图像（而不是红色边框）对齐，这意味着文本的宽度和高度属性应该响应图像，而不是它所处的容器。

这是我目前的代码：

// CSS
.textoverimage {
    position: absolute;
    background: green;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: white;
    word-wrap: break-word;
    text-align: center;
    width: 100%;
    height: auto;
    bottom: 0;
    left:0;
    padding: 5px;
    z-index: 5;
    border-radius: 0px 0px 3px 3px;
}

// HTML
<div class="container">
  <div class="row">
    <div id="0" class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
      <a href="#" class="d-block mb-12">
        <img class="rounded  img-fluid" src="http://via.placeholder.com/160x230.jpg">
        <div class="textoverimage">Random</div>
      </a>
    </div>
  </div>
</div>

完整示例：https://www.bootply.com/Gwde8WHtot

有没有办法实现这个目标？如果在调整浏览器大小时调整列/图像大小，则文本也应该响应。任何帮助是极大的赞赏！提前谢谢。

Answer 1

你几乎就在那里，你只需要添加：

.d-block {
  position: relative;
}

由于锚点围绕图像，你在那里设置一个相对边界，意味着一个位置：绝对内部将相对于那些边界。

Answer 2

您可以将（＆＃39; .d-block mb-12＆＃39;）div设置为position：relative，然后将文本位置设置为absolute（希望div覆盖整个图像。完成后，您可以使用：

.textoverimage{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin: 0 auto;
}

那么父div将是：

.d-block {
postion:relative;
width:100%;
height:100%;
}

这应该有效，希望.d-block div有一个父div，其宽度/高度设置在PX中，如果没有删除高度和宽度attr，那么你应该是完美的。

别忘了保证金：0自动;

如果它不是绝对中心，那么可以尝试添加

display:block;      or      display:inline-block;

希望这有帮助

使用image作为文本的容器而不是div

2 个答案: