CODEWITHSUNDEEP
htmlcss
raj
raj

Reputation: 6094

Vertically align badges with css

I have a list which shows a users score.

Align

This is my HTML. I would like each value to be aligned. I have tried different options such as using tables, and using grid. I am unable to implement it that way. The badges is never aligned. I could finally achieve it though absolute positioning of credits. But thats not responsive.

    <div class="inner-counter">
      <div class="profile-credits">
        <span  class="credit">{{auth.user?.hdc}}</span>
        <span >
          <div class="badges" style="background-color: #ffcc00"></div>
        </span>
        <span class="counter-text">
          Books hunted
        </span>
      </div>
      <div class="profile-credits">
        <span class="credit">{{auth.user?.ohc}}</span>
        <span>
          <div class="badges" style="background-color: #ABBBC2"></div>
        </span>
        <span class="counter-text">
          Own hunts
        </span>
      </div>
      <div class="profile-credits">
        <span class="credit">{{auth.user?.hgc}}</span>
        <span>
          <div class="badges" style="background-color: #cc9966"></div>
        </span>
        <span class="counter-text">
          Books hunting
        </span>
      </div>
    </div>

Here is the css with absolute positioning.

  .badges{
    display: inline-block;
    height: 8px;
    width: 8px;
    border-radius: 4px;
    margin-left: 4px;
  }
  .counters{
    text-align: center;
    vertical-align: middle;
    margin-top: 30px;
    margin-left: 15%;
  }
  .counter-text {
    padding-left: 10px;
  }
  .profile-credits{
    padding-top: 10px;
    .credit{
      text-align: right;
      position: absolute;
      right: 70%;
    }
  }
  .inner-counter{
    text-align: left;
    display: inline-block;
  }

How can I do it without absolute positioning of credit. Each column left-aligned itself?

Upvotes: 2

Views: 928

Answers (4)

RemyaJ
RemyaJ

Reputation: 5526

https://jsfiddle.net/RemyaJ/n19hdzs6/4/

    .inner-counter {
      display:table;
      }
      .profile-credits {
        display:table-row;
      }
    }
    .badge-wrap {
      display: table-cell;
    }
    .badges{
    height: 8px;
    width: 8px;
    border-radius: 4px;
    margin-left: 4px;
  }
  .counters{
    text-align: center;
    vertical-align: middle;
    margin-top: 30px;
    margin-left: 15%;
  }
  .counter-text {
    padding-left: 10px;
    display: table-cell;
  }
  .profile-credits{
    padding-top: 10px;

  }
  .credit{
      text-align: right;
     display: table-cell;
    }
  .inner-counter{
    text-align: left;
    display: inline-block;
  }

Upvotes: 4

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3213

I'm seeing that best way is to put the numbers inside container and the badges with the text inside another container, so that each time the number get bigger this will push the whole container and it will be always aligned like this

enter image description here

Upvotes: 0

Kris Selbekk
Kris Selbekk

Reputation: 7654

Basically you have to set the width of the credit-class to your desired width.

Here's a working version:

https://codepen.io/selbekk/pen/xdrRNp

Another approach is by using either css-grid or flexbox, but this would be the quickest win (given that you know how large this credits number can be).

Here's how you do the same thing with flexbox: https://codepen.io/selbekk/pen/rmwjOz

Upvotes: 3

js.palus
js.palus

Reputation: 83

There are not aligned because your numbers may grow and push the badges. You will need to have your number cells growing all together.

You can also review your presentation and put the number at the end instead. this way you have no more issue.

Upvotes: 0

Related Questions