Question

当前文本显示在div上方，我希望将其显示在图像下方。我无法执行此操作。

.modal-body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: white;
  position: relative;
}

#img {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

<div class="modal-body">
  <img id="img" style="width:30%;" src="logo.png" />
  <p style="text-align:center;color:3b3b3b;display:block;top:60%;">My text</p>
</div>

Answer 1

为什么不使用flex-box：

.modal-body{
width:100%;
height:100%;
margin:0;
background-color:white;
display: flex;
flex-direction: column;
}

#img{
margin:auto;
}

<div class="modal-body">
<img id="img" style="width:30%;" src="https://via.placeholder.com/150

C/O https://placeholder.com/" />
<p style="text-align:center;color:3b3b3b;display:block;top:60%;">My text</p>
</div>

Answer 2

从CSS移除位置：绝对

还尝试将div / div放在图像img和p元素周围。

<div class="modal-body">
  <div>
      <img id="img" style="width:30%;" src="logo.png" />
  </div>
  <div>
       <p style="text-align:center;color:3b3b3b;display:block;top:60%;">My text</p>
   </div>
</div>

如何在<div>内居中（水平和垂直）的图像下方放置文本

2 个答案: