垂直對齊徽章與css

我有一個列表顯示了用戶的分數。垂直對齊徽章與css

這是我的HTML。我希望每個值都一致。我嘗試了不同的選項，例如使用表格和使用網格。我無法這樣實施。徽章永遠不會對齊。我終於可以通過absolute來實現它的定位。但那不是迴應。

<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>

這裏是絕對定位的CSS。

.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; 
    }

我該怎麼辦呢沒有信用的絕對定位。每列都是左對齊的？

來源

2017-05-02 raj

•有時，如果是行內的子彈，你可以只使用UTF-8子彈將被正確對齊文本，你只需要放大字體。代碼：'•'• – Troyer

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; 
    }

來源

2017-05-02 10:05:54 RemyaJ