0

I have a layout where I have a number next to a name and I want that layout to be centered in its container. It works fine if the name stays on one line, but if the name requires two lines then the entire flex element takes up the full width even though the broken lines visually don't take up the full space.

enter image description here

Notice how "Aaron Gray" stays on one line and the flexbox (yellow BG) remains centered in it's container (which is visually centered relative to the blue box on top of it, which is what I want)?

But notice how the "Peja Stojakowi" layout takes up the full width even though visually there's a lot of empty space on the right and consequently the num/name combo does not look centered relative to the blue box above it?

Here's the markup and css I'm using:

  .LinkMap-playerWrap {
    position: relative;
    background-color: blue;

    .LinkMap-playerWrapNameArea {
      position: absolute;
      bottom: -10px;
      left: -20px;
      right: -20px;
      transform: translateY(100%);
      display: flex;
      justify-content: center;
      background-color: pink;

      .LinkMap-playerWrapNameAreaInner {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: yellow;

        .LinkMap-playerWrapNum {
          margin-right: 5px;
          padding-right: 5px;
          border-right: 1px solid #000;
          align-self: start;
          height: 100%;
        }
      }
    }
  }

<div class="LinkMap-playerWrap">
  <div class="LinkMap-playerWrapNameArea">
    <div class="LinkMap-playerWrapNameAreaInner">
      <div class="LinkMap-playerWrapNum">16</div>
      <div class="LinkMap-playerWrapName">Peja Stojakowi</div>
    </div>
  </div>
  <div class="Player" style="width: 90px; height: 90px;">
    <div class="Player-innerWrap">
  </div>
</div>
robmisio
  • 1,066
  • 2
  • 12
  • 20
  • @ChrisMedina I haven't. I'm not seeing how that would help at all. There's no overflow that I'd want to hide. – robmisio May 18 '20 at 20:43
  • @ChrisMedina But I want it to go to the next line, I just don't wan't it to unnecessarily take up 100% of the width. Looks though like that may be how the browser behaves on line breaks. – robmisio May 18 '20 at 20:45

0 Answers0