Question

我想将文本置于div元素中的图像上方。

这是我试过的：

CSS：

    .container {
  margin: 0 auto;
  max-width: 1200;
}
.header {
    width: 100%;
}
.ring {
    max-width: 100%;
    position: relative;

}
.flex_text  {
    position: absolute;
    color: #B64547;
    z-index: 100;
    font-family: Poppins;
    font-size: 30px;
    text-align: center;
}


.cell img {
    display: block;
}

HTML：

<div class="container">
    <div class="grid">
        <div class="cell">
            <h4 class="flex_text">Brewing, get started!</h4>
            <img src="img/Kaffe_1.jpg" alt="Ring1" class="ring">
        </div>

显然，它没有用。该网站具有响应性，因此该解决方案应该具有响应性。

我环顾四周，尝试了很多不同的事情，但他们没有工作。我不知道，但也许有jquery的解决方案？谢谢:)）

Answer 1

在父元素上

position: relative;和display: inline-block;（或者你可以float），这样它将在图像周围绘制一个相对定位的正方形，然后top: 50%; transform: translateY(-50%); left: 0; right: 0;居中文本。

    .container {
  margin: 0 auto;
  max-width: 1200;
}
.header {
    width: 100%;
}
.ring {
    max-width: 100%;
    position: relative;

}
.cell {
  position: relative;
  display: inline-block;
}
.flex_text  {
    position: absolute;
    color: #B64547;
    z-index: 100;
    font-family: Poppins;
    font-size: 30px;
    text-align: center;
  top: 50%;
  margin: 0;
  left: 0; right: 0;
  transform: translateY(-50%);
}


.cell img {
    display: block;
}

<div class="container">
    <div class="grid">
        <div class="cell">
            <h4 class="flex_text">Brewing, get started!</h4>
            <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="Ring1" class="ring">
        </div>

Answer 2

你可以考虑在这里使用flex。

检查此代码段

＆＃13;

.grid {
  position: relative;
}
.cell {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex_text {
  position: absolute;
  color: red;
}
.cell img {}

＆＃13;

<div class="container">
  <div class="grid">
    <div class="cell">
      <h4 class="flex_text">Brewing, get started!</h4>
      <img src="http://www.planwallpaper.com/static/images/9-credit-1.jpg" width=200px height=200px alt="Ring1" class="ring">
    </div>
  </div>
</div>

＆＃13;

希望这有帮助

如何在div元素中垂直和水平文本居中

2 个答案: