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 - 否则，内容将自然地排列在块流中。

您可以尝试这样的事情：

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

垂直对齐图像上的文字

1 个答案: