no whitespace when aligning with flexbox can't align text

Question

I'm wondering what's causing it not to read any whitespace inbetween the span or p tags as well as why the span doesn't align to the center with everything else?

li {
  display: flex;
  align-items: center;
}

li img {
  width: 25px;
  height: 25px;
}

li span {
  align-self: center;
}

<ul>
  <li>
    <a href="https://placeholder.com">
      <img src="http://via.placeholder.com/350x150"> <span> Username  </span>
    </a>

    <p> added you as a friend</p>
  </li>
</ul>

`a` is aligned with p AND the span is inside the `a` and flexbox is whitespace-free — Temani Afif, Jun 13 '18 at 20:27
The `span` is not a flex item. So `align-self: center` is ignored. https://stackoverflow.com/q/37840646/3597276 — Michael Benjamin, Jun 13 '18 at 23:16

Nandita Sharma · Answer 1 · 2018-06-13T20:35:01.897

1

Use   to create the space.

Or use padding/margin on span.

li {
  display: flex;
  align-items: center;
  justify-content: center;
}

li img {
  width: 25px;
  height: 25px;
}

li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
li span {
  margin: 0 8px;
}

<ul>
  <li>
    <a href="https://placeholder.com">
      <img src="http://via.placeholder.com/350x150"> <span> Username  </span>
    </a>

    <p> added you as a friend</p>
  </li>
</ul>

edited Jun 13 '18 at 20:35

answered Jun 13 '18 at 20:31

Nandita Sharma

13,287
2
22
35

don't use ` `.. margin is better. this will break text wrapping and the size of the space is not configurable (you'll end up with 2, 3, 4 of these in a row if you use these for spacing regularly) – caesay Jun 13 '18 at 20:33
oh ok, you mean the nbsp .. Yeah its not a good practice. but i have added 2 answers in it. Plz mention clearly otherwise it will confuse the OP :) – Nandita Sharma Jun 13 '18 at 20:34

no whitespace when aligning with flexbox can't align text

1 Answers1