Trying to center tag and
tag within a
?

Question

I currently have a div tag and within that tag contains an img tag and a p tag. I wish to center these two elements on the same horizontal axis.

This is my code:

.template-pill {
  display: flex;
  justify-content: center;
}

.pill-icons {
  height: 20px;
  width: 20px;
}

<div className="template-pill">
    <img className="pill-icons" src={healthy_logo} />
    <p> Healthy </p>
</div>

This is what I currently have:

But this is what I'm trying to accomplish:

Try `align-items: center` on `.template-pill`. – Cuong Le Ngoc Jul 01 '21 at 01:31 — Cuong Le Ngoc, Jul 01 '21 at 01:31

score 2 · Answer 1 · answered Jul 01 '21 at 01:35

2

justify content controls alignment on the main axis. You should use align items: center as align items works for cross axis.

.template-pill {
  display: flex;
  align-items: center;
}

Check the docs here

answered Jul 01 '21 at 01:35

Saral Karki

4,530
2
7
10

score 1 · Answer 2 · answered Jul 01 '21 at 02:27

1

Just add another css rule:

align-items: center;

in .template-pill and you would be done

answered Jul 01 '21 at 02:27

Satyam Mishra

70
8

score -1 · Answer 3 · edited Jul 01 '21 at 09:51

-1

Here you go, just add some padding into the div and also dont forget to round borders with border-radius.

    .template-pill {
      display: flex;
      justify-content: center;
      padding: 2px;
    }
    
    .pill-icons {
      height: 20px;
      width: 20px;
      border-radius: 5px solid green;     
    
    }

edited Jul 01 '21 at 09:51

I_love_vegetables

1,575
5
12
26

answered Jul 01 '21 at 01:37

Fat Halimi

1

The padding won't align the two elements. You need to use `align-items: center` to align them. The padding will just push them down a bit but not align them. – Sean Jul 01 '21 at 02:47

Trying to center tag and tag within a ?

3 Answers3

Trying to center tag and
tag within a
?