html - 垂直对齐图像上的文本

Question

我知道这个问题已经被问了很多，但我一直无法在答案中找到解决方案。我试图将文本置于图像的中心，但我在垂直对齐方面遇到了一些问题。这是我的代码:

<div class="col-sm-12 col-md-12 col-lg-12 main_category_container">
    <div class="col-sm-4 col-md-4 col-lg-4">
        <div class="wrap">
            <h3 class="sub_category_title"><a href="some link">Centered text</a></h3>
            <a href="some link"><img src="some image"></a>
        </div>
    </div>
</div>

和

.wrap {
height:auto;
margin: auto;
text-align:center;
position:relative;
}

h3.sub_category_title {
vertical-align: middle;
}

现在文本在图像上方水平居中，但我不知道如何在图像中间垂直对齐它。

提前致谢!

Answer 1

通常，如果您试图将一个元素与另一个元素重叠，您最终会使用 position: absolute 或 position: relative - 否则，内容自然会将自己安排在 block 流中。

你可以尝试这样的事情:

.image-wrapper {
  position: relative;
  text-align: center;
  
  width: 300px; /* change or remove as needed */
  margin: auto;
}

.image-link { display: block; }

.image-text {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  
  /* The rest of this is just for this demo,
  you can change it for your situation. */
  
  font-weight: bold;
  color: white;
  font-family: sans-serif;
  background: rgba(0, 0, 0, 0.5);
}

<div class="image-wrapper">
  <a class="image-link" href="#">
    <img class="image" src="http://loremflickr.com/300/200" alt="kitten!">
    <h3 class="image-text">A Centered Label</h3>
  </a>
</div>