How to place text below image which is centred(both horizontally and vertically) inside

Question

Currently the text is show on top of div , I want it below the image.I am unable to do it.

.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>

score 2 · Answer 1 · answered Apr 20 '20 at 09:57

2

Why not use 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>

answered Apr 20 '20 at 09:57

spiderko_2

118
4

sir this is working but there is a lot of space at the bottom of image and text, it is giving equal spacing at top and bottom of image, as result text is almost at bottom of div – aryanknp Apr 20 '20 at 10:07
I solved this by making a div of 50 percent height placed image at the bottom and place text below the div – aryanknp Apr 20 '20 at 10:37

score 1 · Answer 2 · answered Apr 20 '20 at 09:52

Remove the position:absolute from the CSS

Also try putting div /div around the image img and the p elements.

<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>

How to place text below image which is centred(both horizontally and vertically) inside

2 Answers2