Question

我想将标题放在图像的中心我尝试放置图像然后标题然后给出标题负边距但是当我这样做时其他元素上升并使其看起来很糟糕

＆＃13;

<div>
    <img src="https://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg" alt="rose image "
    <h2>i want to put this heading in the center of the above image  </h2>
</div>

＆＃13;

Answer 1

喜欢这个吗？

div {
  background-image: url("https://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg");
  height: 300px;
  position: relative;
}

h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

<div>
  <h2>i want to put this heading in the center of the above image </h2>
</div>

Answer 2

尝试这样的事情

.image  {
   position: relative;
   float: left;
}
.image h2 {
   position: absolute;
   z-index: 2;
   top: 50%;
   left: 0;
   right: 0;
   margin: 0 auto;
}

<div class="image">
    <img src="https://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg" alt="rose image " />
    <h2>i want to put this heading in the center of the above image  </h2>
</div>

Answer 3

使用position: absolute上的<h2>和position: relative上的div。

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  margin: auto;
  height: 20px;
}

<div class="parent">
  <img src="https://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg" alt="rose image" />
  <h2 class="child">i want to put this heading in the center of the above image </h2>
</div>

Answer 4

另一种方法是使用flex和background-image。

＆＃13;

.bg {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("http://placehold.it/200x200");
    background-repeat: no-repeat;

}

＆＃13;

<div class="bg">
  <h1> TEXT </h1>
</div>

＆＃13;

Answer 5

喜欢这个吗？

    h2{
 		padding:20%;
	}

<body background="http://wallpapercave.com/wp/N3BgXEI.jpg">
<div>
    <h2>I want to put this heading in the center of the above image  </h2>
</div>
</body>

如何将标题放在图像的中心

5 个答案: