Question

我试图将一些字幕文字垂直放置在图像中间。我已经使用<li>尝试了大量不同的技术，而不是什么，但似乎无法使其发挥作用！

我有一个<a>嵌套<img>和嵌套div.caption-wrapper＆amp; <img>。我将字幕包装的大小设置为与div.caption-wrapper相同，但似乎无法将<img>置于{{1}}

之上

显然，我需要掌握基础知识，但我需要here is a fiddle。有人可以建议解决方案吗？

Answer 1

将以下css添加到.caption-wrapper：

top: 50%;
transform: translateY(-50%);
-webkit-transorm: translateY(-50%); /* for Chrome */
position: absolute;
left: 0;
display: inline-block;

另外，从height: 100%移除width: 100%和.caption-wrapper属性。

Answer 2

这是position: absolute和 Flexbox

的一个选项

ul {
  list-style-type: none;
  padding: 0;
}

a {
  position: relative;
  display: inline-block;
}

.caption-wrapper {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  text-align: center;
}

<ul id="og-grid" class="og-grid">
  <li class="grid-item">
    <a href="#">
      <img src="http://oldo-nicho.com/img/services/2.jpg" alt="img01"/>
      <div class="caption-wrapper">
        <span class="grid-caption">Caption text! Caption! Caption!</span>
      </div>
    </a>
  </li>
</ul>

在图像上垂直居中多行文本

2 个答案: