Flexbox - vertically center icon in line with text

HTML-CSS
1

Hi! I’m creating a little quiz app, you can check it here.

If you click on show highscores, i have icons for the first 3 position.

Each icon and relative text have different sizes according to the position on the chart.

How can i vertically align each icon with the text?

Using a margin bottom seems to do the trick, but it’s not perfect and i’m not sure if it’s the right way to do it.

2

So what you have is a rather simple problem. Let me explain how to solve it.

What you have now is:

--box 1--------
|   img1      |
|   img2      |
|   img3      |
---------------

--box 2-------------
|  -p--------|     |
|  |   name  |     |
|  |---------|     |
|  -p--------|     |
|  |   name  |     |
|  |---------|     |
|  -p--------|     |
|  |   name  |     |
|  |---------|     |
|                  |
--------------------

So what you need to do is move your awards images inside a new div AND inside of box 2 beside your p box
That’s when you place both your new img div and p container inside a flexbox (display: flex)


--box 2----------------------------------
|  --- new box (flex box) ----------- | |
| | |-imgbox --------| |-p----------- | |
| | |   image1       | | |   name  |  | |
| |  ----------------  |  ----------  | |
|  ------------------------------------ |
|  --- new box (flex box) ----------- | |
| | |-imgbox --------| |-p----------- | |
| | |   image2       | | |   name  |  | |
| |  ----------------  |  ----------  | |
|  ------------------------------------ |
|  --- new box (flex box) ----------- | |
| | |-imgbox --------| |-p----------- | |
| | |   image3       | | |   name  |  | |
| |  ----------------  |  ----------  | |
|  ------------------------------------ |
-----------------------------------------

This is fun making ^^^

3

Another more hackish solution…
move your display-badge div inside of display-username div

and add these rules:

.display-username {
   position: relative;
}

.badge-1, .badge-2, .badge-3 {
   position: absolute;
}

img.badge-1 {
   left: -125px;
   top: 20px;
}

img.badge-2 {
    left: -120px;
    top: 130px;
}

img.badge-3 {
   left: -115px;
   top: 225px;
}
4

I might just nest the icon inside the <p> element before the name and then make it a flex container. Then move the adding of the icons to the JS when you add the elements to the DOM.

I would suggest also looking into using template literals and insertAdjacentHTML for this kind of DOM manipulation.

But if you still want to go the createElement route there is also insertAdjacentElement.

BTW. The padding on .username-score is causing an overflow, use max-width instead.

.username-score {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: space-between;
  /* padding: 0 35rem; */
  max-width: 520px;
}