Question

我正试图将文字置于横幅图像上。

这是一个jsfiddle。

HTML:

<div class="about-me">
  <div class="about-me__banner">

    <div class="about-me__banner-text">
      <h3>About Me</h3>
    </div>

    <div class="about-me__banner-image">
      <img src="https://i.imgur.com/qiUWxdd.png">
    </div>

  </div>
</div>

CSS:

h3 {
  color: orange;
}

Answer 1

＆＃13;

.about-me__banner{
  position:relative;
  text-align:center;
}
.about-me__banner-text{
  position:absolute;
  width:100%;
  color: orange;
}

＆＃13;

<div class="about-me">
    <div class="about-me__banner">
        <div class="about-me__banner-text">
            <h3>About Me</h3>
        </div>
        <div class="about-me__banner-image">
            <img src="https://i.imgur.com/qiUWxdd.png">
        </div>
    </div>
</div>

＆＃13;

Answer 2

这样做很简单。

首先，您需要将文本容器.about-me__banner-text相对于其父.about-me__banner进行绝对定位，以便它可以保留在您的图像上。

然后，您可以使用flexbox将.about-me__banner内的所有内容纵向和横向居中，从而产生以下新规则：

.about-me__banner {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
}

.about-me__banner-text {
  position: absolute;
}

这应该可以解决问题。 You can check your modified fiddle here.

Answer 3

＆＃13;

.about-me {
  text-align:center;
}

＆＃13;

Answer 4

这是https://jsfiddle.net/fkp9g1jr/

.about-me__banner-text

类的宽度与图像相同

Answer 5

如果你有一个固定的高度，那么你有另一个解决方案：

.about-me__banner-text {
    background-image: url("https://i.imgur.com/qiUWxdd.png");
    background-repeat: no-repeat;
    background-position: center;
    height: 57px;
    line-height: 57px;
    text-align: center;
}

这是jsfiddle：https://jsfiddle.net/01h8tqcc/

更新

分割这样的样式可能更好：

.about-me__banner {
  background-image: url("https://i.imgur.com/qiUWxdd.png");
  background-repeat: no-repeat;
  background-position: center;
}

.about-me__banner-text {
  height: 57px;
  line-height: 57px;
  text-align: center;
}

jsfiddle：https：https://jsfiddle.net/01h8tqcc/1/

如何在图像上居中显示文字？

5 个答案: