Centering both image and text in a div using bootstrap

Asked Aug 25 '20 at 10:24

Active Aug 25 '20 at 10:29

Viewed 14 times

I'm trying to perfectly center both the image and the text below the image in a container using this code

<div className="d-flex justify-content-center align-items-center w-50" id="container1">
   <div>
     <img className="border" src="assets/image1.png" alt="" />
     <p className="mt-3">Text below image</p>
   </div>
 <div>

but it's not vertically centered it has more space on bottom compared to top

edited Aug 25 '20 at 10:29

asked Aug 25 '20 at 10:24

Newboy11

2,152
3
21
32

@zim yup the container has a defined height 50vh – Newboy11 Aug 25 '20 at 10:30
@Zim sorry it's 50vh. – Newboy11 Aug 25 '20 at 10:35
Seems to work fine: https://www.codeply.com/p/HFvtClzJtq – Zim Aug 25 '20 at 10:37
as you can see it's not vertically centered it has more space in the bottom than the top :) – Newboy11 Aug 25 '20 at 10:55
Are you talking about the margin on the bottom of the paragraph? Remove it with `mb-0` – Zim Aug 25 '20 at 11:29

Centering both image and text in a div using bootstrap

0 Answers0