Question

我没有成功将div的中心放在img上，而div的类是“ sign”，而img包含在div的“容器”中。

.container{
  width: 500px;
  height: 300px;
  position: relative;
}

img{
  width: 100%;
  height: auto;
}

.sign{
  width: 90%;
  background-color: brown;
  padding: 2px;
  position: absolute;
  bottom: 10%;
  text-align:center;
}
.sign h1{
  color: black;
}

<div class="container">
  <img src="https://st3.idealista.com/news/archivos/styles/news_detail/public/2019-08/casa_malaga_fachada.jpg?sv=_n3BRi9v&itok=5LkoQoXO" />
  <div class="sign">
    <h1>House on sale</h1>
  </div>
</div>

Answer 1

您可以在容器上使用display: flex和justify-content: center

.container {
  display: flex;
  justify-content: center;
  
  width: 500px;
  height: 300px;
  position: relative;
}

img {
  width: 100%;
  height: auto;
}

.sign {
  width: 90%;
  background-color: brown;
  padding: 2px;
  position: absolute;
  bottom: 10%;
  text-align: center;
}

.sign h1 {
  color: black;
}

<div class="container">
  <img src="https://st3.idealista.com/news/archivos/styles/news_detail/public/2019-08/casa_malaga_fachada.jpg?sv=_n3BRi9v&itok=5LkoQoXO" />
  <div class="sign">
    <h1>House on sale</h1>
  </div>
</div>

如果您想继续使用display: absolute，则可以将关注内容添加到.sign { ... }

.sign {
  position: absolute;
  bottom: 10%;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
}

如何将div放在容器标签div内的img标签上水平居中？

1 个答案: